UI Experiment P3: fix offscreen elements on mobile

mrdjohnson · Jul 24, 2024 · 511bdab · 511bdab
1 parent 6801c2d
commit 511bdab
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -12,7 +12,7 @@ import Lightbox from '~/features/lightbox/components/Lightbox'
 function App() {
   return (
     <Dropzone>
-      <div className="container drawer drawer-end mx-auto flex max-h-screen flex-col place-self-center p-3 text-base-content">
+      <div className="container drawer drawer-end mx-auto flex !max-h-dvh flex-col place-self-center p-3 text-base-content">
         <Navbar />
 
         <SettingsModal />
@@ -23,7 +23,7 @@ function App() {
 
         <OmniBar />
 
-        <section className="drawer-content flex h-screen max-h-full w-full flex-grow flex-row gap-4 overflow-hidden text-xl">
+        <section className="drawer-content flex h-dvh max-h-full w-full flex-grow flex-row gap-4 overflow-hidden text-xl">
           <aside className="hidden lg:block" role="complementary">
             <SideBar />
           </aside>

diff --git a/src/containers/Dropzone.tsx b/src/containers/Dropzone.tsx
@@ -11,7 +11,7 @@ const Dropzone = ({ children }: PropsWithChildren) => {
 
   return (
     <div
-      className="grid !h-svh !max-h-svh bg-base-100"
+      className="grid !h-dvh !max-h-dvh bg-base-100"
       {...getRootProps()}
       onClick={undefined}
     >

diff --git a/src/index.css b/src/index.css
@@ -102,8 +102,8 @@ body {
     'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  max-height: 100svh !important;
-  height: 100svh !important;
+  max-height: 100dvh !important;
+  height: 100dvh !important;
 }
 
 code {