Merge pull request #19 from Juliusolsson05/fix/mobile-ui

fix: improve mobile shell sizing and signal embeds

Author: Juliusolsson05

src/app/(dashboard)/layout.tsx

@@ -5,7 +5,7 @@ export default function DashboardShellLayout({ children }: { children: React.Rea
   return (
     <>
       <ViewportHeightSync />
-      <div className="flex flex-col min-h-0 overflow-hidden" style={{ height: 'var(--app-height)' }}>
+      <div className="flex flex-col min-h-0 overflow-hidden" style={{ height: 'var(--app-shell-height)' }}>
         <Header />
         <div className="flex flex-1 min-h-0 overflow-hidden pb-[var(--safe-bottom)]">
           {children}

src/app/browse/layout.tsx

@@ -8,7 +8,7 @@ export default function BrowseLayout({ children }: { children: React.ReactNode }
       <div
         data-theme="auto"
         className="flex flex-col min-h-0 overflow-hidden bg-[var(--bg-app)]"
-        style={{ height: 'var(--app-height)' }}
+        style={{ height: 'var(--app-shell-height)' }}
       >
         <BrowseShell>{children}</BrowseShell>
       </div>

src/app/globals.css

@@ -6,6 +6,8 @@
 
 :root {
   --app-height: 100vh;
+  --app-height-mobile: 100vh;
+  --app-shell-height: var(--app-height);
   --safe-top: env(safe-area-inset-top, 0px);
   --safe-right: env(safe-area-inset-right, 0px);
   --safe-bottom: env(safe-area-inset-bottom, 0px);
@@ -142,7 +144,11 @@
   html, body { height: 100%; }
 
   @supports (height: 100dvh) {
-    :root { --app-height: 100dvh; }
+    :root {
+      --app-height: 100dvh;
+      --app-height-mobile: 100dvh;
+      --app-shell-height: 100dvh;
+    }
   }
 
   body {

src/shared/components/layout/ViewportHeightSync.tsx

@@ -5,9 +5,14 @@ import { useEffect } from 'react';
 function updateAppHeightVar() {
   if (typeof document === 'undefined' || typeof window === 'undefined') return;
   const vv = window.visualViewport;
+  const isCoarsePointer = window.matchMedia('(pointer: coarse)').matches;
   // When pinch-zoomed (scale > 1), visualViewport.height shrinks — use innerHeight instead
   const vh = vv && vv.scale <= 1 ? vv.height : window.innerHeight;
+  const mobileVh = vv?.height ?? window.innerHeight;
+  const shellVh = isCoarsePointer ? mobileVh : vh;
   document.documentElement.style.setProperty('--app-height', `${Math.round(vh)}px`);
+  document.documentElement.style.setProperty('--app-height-mobile', `${Math.round(mobileVh)}px`);
+  document.documentElement.style.setProperty('--app-shell-height', `${Math.round(shellVh)}px`);
 }
 
 export function ViewportHeightSync() {
@@ -30,4 +35,3 @@ export function ViewportHeightSync() {
 
   return null;
 }
-

src/shared/components/shared/XPostCard.tsx

@@ -20,10 +20,10 @@ export function XPostCard({ post, compact }: Props) {
     <div className="card mb-2" style={{ borderLeft: `3px solid ${border}` }}>
 
       {hasEmbed ? (
-        <div className="grid grid-cols-[1fr_1fr] min-h-0 min-w-0 overflow-hidden">
+        <div className="grid h-[min(78vh,760px)] min-h-[640px] min-w-0 grid-cols-1 grid-rows-[minmax(0,1fr)_minmax(0,1fr)] overflow-hidden lg:h-auto lg:min-h-0 lg:grid-cols-[1fr_1fr] lg:grid-rows-1">
           <div
             data-theme="dark"
-            className="border-r border-[var(--bd-s)] px-1 py-2 [&_>_div]:!my-0 overflow-hidden"
+            className="min-h-0 overflow-y-auto border-b border-[var(--bd-s)] px-1 py-2 [&_>_div]:!my-0 lg:border-r lg:border-b-0"
           >
             <div className="flex items-center gap-1 px-2 pb-1.5">
               <span className="mono text-[8px] text-[var(--t4)] tracking-[0.08em]">ORIGINAL</span>
@@ -33,7 +33,7 @@ export function XPostCard({ post, compact }: Props) {
             </Suspense>
           </div>
 
-          <div className="flex min-w-0 flex-col overflow-hidden">
+          <div className="flex min-h-0 min-w-0 flex-col overflow-y-auto">
             <div className="flex items-center gap-1 px-3 py-1.5">
               <span className="mono text-[8px] text-[var(--blue-l)] tracking-[0.08em]">PHAROS INTEL</span>
             </div>