fixed reasoning

frontend/src/App.css

@@ -1,7 +1,9 @@
 .app {
-  min-height: 100vh;
+  height: 100%;
+  min-height: 0;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .app-header {
@@ -39,4 +41,38 @@
 .app-main {
   flex: 1;
   min-height: 0;
+  overflow: hidden;
+}
+
+@media (max-width: 768px) {
+  .app-header {
+    padding: 0.55rem 0.75rem;
+    gap: 0.5rem;
+    flex-shrink: 0;
+  }
+
+  .app-header h1 {
+    display: none;
+  }
+
+  .app-header nav {
+    flex: 1;
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    gap: 0.35rem;
+    padding-bottom: 0.1rem;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .app-header nav::-webkit-scrollbar {
+    display: none;
+  }
+
+  .app-header nav a {
+    padding: 0.4rem 0.65rem;
+    font-size: 0.85rem;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
 }