trying to fix weird height issues on mobile

mazwrld · Apr 28, 2024 · 139052d · 139052d
1 parent 644beeb
commit 139052d
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 20 deletions.
diff --git a/app/@modal/(.)images/[id]/modal.tsx b/app/@modal/(.)images/[id]/modal.tsx
@@ -21,7 +21,7 @@ export function Modal({ children }: { children: React.ReactNode }) {
   return createPortal(
     <dialog
       ref={dialogRef}
-      className="m-0 h-svh w-svw bg-slate-950/90 text-white"
+      className="m-0 h-full w-svw bg-slate-950/90 text-white"
       onClose={onDismiss}
     >
       {children}

diff --git a/app/page.tsx b/app/page.tsx
@@ -7,9 +7,9 @@ export const dynamic = 'force-dynamic'
 
 function Loading() {
   return (
-    <div className="flex h-full items-center justify-center overflow-hidden">
+    <div className="flex h-svh items-center justify-center overflow-hidden">
       <div className="relative rounded-lg p-5 shadow-lg">
-        <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center">
+        <div className="absolute left-0 top-0 flex h-svh w-svw items-center justify-center">
           <div className="h-20 w-20 animate-spin rounded-full border-4 border-white"></div>
         </div>
       </div>
@@ -21,7 +21,7 @@ export default function HomePage() {
   return (
     <>
       <SignedOut>
-        <div className="h-full w-full text-center text-2xl">Please sign in</div>
+        <div className="h-svh w-svw text-center text-2xl">Please sign in</div>
       </SignedOut>
       <SignedIn>
         <Suspense fallback={<Loading />}>

diff --git a/components/fullImagePage.tsx b/components/fullImagePage.tsx
@@ -11,8 +11,8 @@ export default async function FullPageImageView(props: { imageId: number }) {
   const image = await getUserImage(idAsNumber)
   const uploaderInfo = await clerkClient.users.getUser(image.userId)
   return (
-    <div className="flex size-full min-w-0">
-      <div className="relative size-full">
+    <div className="flex h-svh w-svw min-w-0">
+      <div className="relative h-svh w-svw">
         <Image
           src={image.url}
           alt={image.name}
@@ -23,19 +23,16 @@ export default async function FullPageImageView(props: { imageId: number }) {
       </div>
       <div className="flex w-48 flex-shrink-0 flex-col border-l">
         <h1 className="border-b p-2 text-center text-lg">{image.name}</h1>
-
         <div className="flex flex-col p-2">
           <span className="text-zinc-400">Uploaded by:</span>
           <span className="text-zinc-200">{uploaderInfo.fullName}</span>
         </div>
-
         <div className="flex flex-col p-2">
           <span className="text-zinc-400">Created on:</span>
           <span className="text-zinc-200">
             {new Date(image.createdAt).toLocaleDateString()}
           </span>
         </div>
-
         <div className="mt-auto flex justify-center p-4">
           <form
             action={async () => {

diff --git a/components/shinyButton.tsx b/components/shinyButton.tsx
@@ -1,21 +1,25 @@
 'use client'
 
-import { motion } from 'framer-motion'
+import { motion, type HTMLMotionProps } from 'framer-motion'
+
+type ExtendedMotionProps = HTMLMotionProps<'button'> & {
+  initial?: Record<string, unknown>
+  animate?: Record<string, unknown>
+}
+
+type ShinyButtonProps = ExtendedMotionProps & {
+  children: React.ReactNode
+}
 
 export default function ShinyButton({
   children,
   type = 'button', // Default to "button" type
-}: {
-  children: React.ReactNode
-  type?: 'button' | 'submit' | 'reset' // Define the optional type prop
-}) {
+  ...rest
+}: ShinyButtonProps) {
   return (
     <motion.button
-      type={type} // Use the type prop
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-expect-error SHUT UP ALREADY
+      type={type}
       initial={{ '--x': '100%', scale: 1 }}
-      // @ts-expect-error TRUST ME THIS WORKS
       animate={{ '--x': '-100%' }}
       whileTap={{ scale: 0.88 }}
       transition={{
@@ -34,6 +38,7 @@ export default function ShinyButton({
         },
       }}
       className="radial-gradient relative w-40 rounded-md px-6 py-2"
+      {...rest}
     >
       <span className="linear-mask relative block h-full w-full tracking-wide">
         {children}

diff --git a/styles/globals.css b/styles/globals.css
@@ -72,12 +72,16 @@
   }
   body {
     @apply bg-background text-foreground;
+    overscroll-behavior: none;
+  }
+  ::-webkit-scrollbar {
+    display: none;
   }
 }
 
 dialog {
-  max-width: 100vw;
-  max-height: 100vh;
+  max-width: 100svw;
+  max-height: 100svh;
 }
 
 svg.spinner {