fix(tc-study): use dynamic viewport height so bottom nav is visible on mobile

- Add .h-dynamic-screen and .min-h-dynamic-screen (100dvh with 100vh fallback)
- Layout root uses h-dynamic-screen so app height accounts for address bar
- Fixes having to scroll to see navigation bar on phone

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: abelpz

apps/tc-study/src/components/Layout.tsx

@@ -27,7 +27,7 @@ export default function Layout() {
   const isReadPage = location.pathname.startsWith('/read')
 
   return (
-    <div className="flex h-screen flex-col bg-gray-50 overflow-hidden">
+    <div className="flex h-dynamic-screen flex-col bg-gray-50 overflow-hidden">
       {!isReadPage && (
       <header className="flex-shrink-0 border-b border-gray-100 bg-white/80 backdrop-blur-sm relative z-[110]">
         <nav className="flex items-center justify-between px-3 py-1.5">

apps/tc-study/src/index.css

@@ -39,6 +39,21 @@
 }
 
 @layer utilities {
+  /*
+   * Dynamic viewport height: accounts for mobile browser UI (address bar, nav bar).
+   * 100dvh = visible viewport; avoids needing to scroll to see bottom nav on phones.
+   * Fallback to 100vh for older browsers.
+   */
+  .h-dynamic-screen {
+    height: 100vh;
+    height: 100dvh;
+  }
+
+  .min-h-dynamic-screen {
+    min-height: 100vh;
+    min-height: 100dvh;
+  }
+
   /* Line clamp utilities */
   .line-clamp-1 {
     display: -webkit-box;