fix: resolve page-header overlap and overflow

crates/openfang-api/static/css/components.css

@@ -1274,6 +1274,7 @@ mark.search-highlight {
 /* Utility */
 .flex { display: flex; }
 .flex-col { flex-direction: column; }
+.flex-wrap { flex-wrap: wrap; }
 .items-center { align-items: center; }
 .justify-between { justify-content: space-between; }
 .gap-2 { gap: 8px; }

crates/openfang-api/static/css/layout.css

@@ -243,6 +243,14 @@
   z-index: 99;
 }
 
+.mobile-menu-btn {
+  position: fixed !important;
+  top: 12px;
+  left: 16px;
+  z-index: 98;
+  padding: 6px 10px !important;
+}
+
 /* Wide desktop — larger card grids */
 @media (min-width: 1400px) {
   .card-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
@@ -277,6 +285,8 @@
     left: -300px;
   }
   .mobile-menu-btn { display: flex !important; }
+  /* Offset header content so it does not overlap the fixed mobile menu button. */
+  .page-header > :first-child { margin-left: 52px; }
 }
 
 @media (min-width: 769px) {
@@ -285,7 +295,14 @@
 
 /* Mobile small screen */
 @media (max-width: 480px) {
-  .page-header { flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px 16px; }
+  .page-header {
+    gap: 8px;
+    padding: 12px 16px;
+    flex-wrap: wrap;
+  }
+  .page-header h2 {
+    line-height: 44px;
+  }
   .page-body { padding: 12px; }
   .stats-row { flex-wrap: wrap; }
   .stat-card { min-width: 80px; flex: 1 1 40%; }

crates/openfang-api/static/index_body.html

@@ -201,7 +201,7 @@
   <!-- Main Content -->
   <main class="main-content">
     <!-- Mobile menu button -->
-    <button class="mobile-menu-btn btn btn-ghost" @click="mobileMenuOpen = !mobileMenuOpen" style="position:fixed;top:8px;left:8px;z-index:98;padding:6px 10px">
+    <button class="mobile-menu-btn btn btn-ghost" @click="mobileMenuOpen = !mobileMenuOpen">
       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
     </button>
 
@@ -4314,7 +4314,7 @@ args = ["-y", "@modelcontextprotocol/server-filesystem", "/path"]</pre>
       <div x-data="logsPage">
         <div class="page-header">
           <h2>Logs</h2>
-          <div class="flex gap-2 items-center" x-show="tab === 'live'">
+          <div class="flex gap-2 items-center flex-wrap" x-show="tab === 'live'">
             <!-- Connection status indicator -->
             <span class="live-indicator" :class="connectionClass">
               <span class="live-dot"></span>