fix: 🐛📱 height now matches mobile height (#1323)

This commit is contained in:
Matthieu Jacq 2023-10-04 12:04:57 +02:00 committed by GitHub
parent bf5b7553d5
commit 945178de39
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 9 additions and 3 deletions

View File

@ -12,7 +12,7 @@ const SelectedChatPage = (): JSX.Element => {
return (
<div
className={`flex flex-col flex-1 items-center justify-stretch w-full h-[100vh] overflow-hidden ${
className={`flex flex-col flex-1 items-center justify-stretch w-full h-fill-available overflow-hidden ${
shouldDisplayFeedCard ? "bg-chat-bg-gray" : "bg-white"
} dark:bg-black transition-colors ease-out duration-500`}
data-testid="chat-page"

View File

@ -41,4 +41,10 @@ div:focus {
/* background: #000; */
@apply bg-gray-500;
}
.h-fill-available {
/* fixes the h-[100vh] issue on mobile */
/* like height: -webkit-fill-available; but for any device (android and iphone) */
@apply h-[100vh] supports-[height:100cqh]:h-[100cqh] supports-[height:100svh]:h-[100svh];
}
}

View File

@ -37,4 +37,4 @@ a {
/* background: #000; */
@apply bg-gray-500;
}
}
}

View File

@ -39,7 +39,7 @@ export const Sidebar = ({
setOpen(false);
}
}}
className="flex flex-col fixed sm:sticky top-0 left-0 h-[100vh] overflow-visible z-30 border-r border-black/10 dark:border-white/25 bg-white dark:bg-black"
className="flex flex-col fixed sm:sticky top-0 left-0 h-fill-available overflow-visible z-30 border-r border-black/10 dark:border-white/25 bg-white dark:bg-black"
>
{!open && (
<button