From c78ea5de0b78e74eb5500c37b4e962aaa643ba8a Mon Sep 17 00:00:00 2001 From: Jeroen Reumkens Date: Fri, 30 Sep 2022 11:12:22 +0200 Subject: [PATCH] Added 100vh fix for ios to make sure it always fills the screen height. By default 100vh on ios sometimes will and sometimes won't take into account the address bar height, causing on eg the event types or bookings pages the content to be behind our bottom nav. (#4770) --- apps/web/styles/globals.css | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css index ca05e96310..b2e440cacc 100644 --- a/apps/web/styles/globals.css +++ b/apps/web/styles/globals.css @@ -99,7 +99,7 @@ html.todesktop nav a[aria-current="page"]{ html.todesktop nav a svg{ color: #0272F7 !important -} +} */ @@ -153,11 +153,11 @@ button[role="switch"][data-state="checked"] { } /* TODO: avoid global specific css */ /* button[role="switch"][data-state="checked"] span { - transform: translateX(16px); + transform: translateX(16px); } */ /* DateRangePicker */ -/* +/* TODO:: Remove on V2 launch */ .react-daterange-picker > .react-daterange-picker__wrapper { @@ -482,3 +482,17 @@ hr { opacity: 1; } } + +/** + * Makes sure h-screen works on mobile Safari. By default h-screen + * does not take into account the height of the address bar, causing + * weird behaviour when scrolling — sometimes the height will be correct + * and sometimes it won't, depending on whether the address bar is + * in 'collapsed' state or not. + * @see: https://benborgers.com/posts/tailwind-h-screen + */ +@supports (-webkit-touch-callout: none) { + .h-screen { + height: -webkit-fill-available; + } +} \ No newline at end of file