Try make screen full height on mobile

simonkellly · May 24, 2024 · aef54e1 · aef54e1
1 parent 19159d0
commit aef54e1
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
@@ -13,7 +13,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      'fixed top-0 z-[100] flex max-h-dvh w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
       className
     )}
     {...props}
@@ -40,7 +40,7 @@ const toastVariants = cva(
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
+  VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
   return (
     <ToastPrimitives.Root

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -69,7 +69,7 @@ function ThemeToggle() {
 
 function Index() {
   return (
-    <main className="flex flex-col h-screen w-screen items-center justify-center container">
+    <main className="flex flex-col h-dvh w-screen items-center justify-center container">
       <Card className="sm:m-4">
         <CardHeader>
           <CardTitle>BLD Ninja</CardTitle>

diff --git a/src/routes/timer.tsx b/src/routes/timer.tsx
@@ -48,7 +48,7 @@ function Timer() {
   const cubeTimer = useCubeTimer();
 
   return (
-    <div className="flex flex-col justify-between h-screen w-screen p-2">
+    <div className="flex flex-col justify-between h-dvh w-screen p-2">
       <ActionBar />
       <div className="bg-card rounded-lg border w-full relative grow mt-2">
         <ScrambleDisplay />

diff --git a/src/routes/trainer.tsx b/src/routes/trainer.tsx
@@ -7,7 +7,7 @@ export const Route = createFileRoute('/trainer')({
 
 function Trainer() {
   return (
-    <div className="flex flex-col justify-between h-screen w-screen p-2">
+    <div className="flex flex-col justify-between h-dvh w-screen p-2">
       <ActionBar />
     </div>
   );