feat(dashboard): enhance mobile support with safe area insets and viewport adjustments

x0sina · x0sina · commit a95e57e249c5 · 2025-12-12T16:55:26.000+03:30
diff --git a/dashboard/index.html b/dashboard/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/statics/favicon/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..700&family=Vazirmatn:wght@100..700&display=swap" rel="stylesheet" />
diff --git a/dashboard/src/components/common/topbar-ad.tsx b/dashboard/src/components/common/topbar-ad.tsx
@@ -244,6 +244,7 @@ export default function TopbarAd() {
           : 'opacity 400ms ease-out, transform 400ms ease-out',
         opacity: isClosing ? 0 : isAnimating ? 1 : 0,
         transform: isClosing ? 'translateY(-8px)' : isAnimating ? 'translateY(0)' : 'translateY(-8px)',
+        paddingTop: isClosing ? undefined : 'env(safe-area-inset-top, 0px)',
       }}
     >
       <a
diff --git a/dashboard/src/index.css b/dashboard/src/index.css
@@ -129,6 +129,14 @@
     scroll-behavior: smooth; /* Smooth scrolling for better UX */
   }
 
+  /* Support for safe area insets in PWA mode on mobile */
+  @supports (padding: env(safe-area-inset-top)) {
+    body {
+      padding-left: env(safe-area-inset-left, 0px);
+      padding-right: env(safe-area-inset-right, 0px);
+    }
+  }
+
   /* Enhanced shadcn-style scrollbar */
   ::-webkit-scrollbar {
     @apply h-2 w-2;

Original file line number	Diff line number	Diff line change
`@@ -244,6 +244,7 @@ export default function TopbarAd() {`
`244`	`244`	`: 'opacity 400ms ease-out, transform 400ms ease-out',`
`245`	`245`	`opacity: isClosing ? 0 : isAnimating ? 1 : 0,`
`246`	`246`	`transform: isClosing ? 'translateY(-8px)' : isAnimating ? 'translateY(0)' : 'translateY(-8px)',`
	`247`	`+ paddingTop: isClosing ? undefined : 'env(safe-area-inset-top, 0px)',`
`247`	`248`	`}}`
`248`	`249`	`>`
`249`	`250`	`<a`