edit overflow: hidden

src/components/shell/AppShell.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-shell-root min-h-[100dvh] w-full bg-surface-2">
     <div
-      class="app-shell-frame mx-auto flex h-[100dvh] max-h-[100dvh] w-full min-w-0 max-w-full flex-col overflow-hidden bg-surface shadow-xl shadow-black/5 dark:shadow-black/30 max-w-app"
+      class="app-shell-frame mx-auto flex w-full min-w-0 max-w-full flex-col bg-surface shadow-xl shadow-black/5 dark:shadow-black/30 max-w-app max-lg:h-[100dvh] max-lg:max-h-[100dvh] max-lg:overflow-hidden lg:min-h-dvh"
     >
       <slot />
     </div>

src/styles/main.css

@@ -26,11 +26,15 @@
   html {
     @apply antialiased font-sans;
     font-family: IRANYekanX, ui-sans-serif, system-ui, sans-serif;
-    height: 100%;
-    overflow: hidden;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
   }
 
-  @supports (-webkit-touch-callout: none) {
+  html::-webkit-scrollbar {
+    display: none;
+  }
+
+  @media (max-width: 1023px) {
     html,
     body,
     #app {
@@ -38,15 +42,17 @@
       overflow: hidden;
     }
 
-    .app-shell-root {
-      min-height: 100%;
-      min-height: -webkit-fill-available;
-    }
+    @supports (-webkit-touch-callout: none) {
+      .app-shell-root {
+        min-height: 100%;
+        min-height: -webkit-fill-available;
+      }
 
-    .app-shell-frame {
-      height: 100%;
-      max-height: 100%;
-      min-height: -webkit-fill-available;
+      .app-shell-frame {
+        height: 100%;
+        max-height: 100%;
+        min-height: -webkit-fill-available;
+      }
     }
   }
 
@@ -64,7 +70,5 @@
 
   #app {
     min-height: 100dvh;
-    height: 100%;
-    overflow: hidden;
   }
 }