From 2cb4b942148fb9a78dd91fa86bb317dc11169c7d Mon Sep 17 00:00:00 2001
From: OpenClaw Bot <openclaw-bot@friborg.uk>
Date: Sat, 9 May 2026 20:20:29 +0200
Subject: [PATCH] fix: keep mobile tabs immediately reachable

---
 src/App.tsx   | 30 +++++++++++++++---------------
 src/index.css | 41 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2d8cd9b..ea7c7e9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -728,6 +728,21 @@ function App() {
         </div>
       </header>
 
+      <nav className="tab-bar" aria-label="BuildPulse v0.1 views" role="tablist">
+        {TABS.map((tab) => (
+          <button
+            key={tab.key}
+            type="button"
+            role="tab"
+            aria-selected={tab.key === activeTab}
+            className={tab.key === activeTab ? 'tab active' : 'tab'}
+            onClick={() => setActiveTab(tab.key)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </nav>
+
       <section className="status-strip card">
         <div className="status-strip-row">
           <span className={`pill status-${backendMode === 'appwrite' ? 'healthy' : backendMode === 'connecting' ? 'connecting' : 'degraded'}`}>
@@ -785,21 +800,6 @@ function App() {
         </div>
       </section>
 
-      <nav className="tab-bar" aria-label="BuildPulse v0.1 views" role="tablist">
-        {TABS.map((tab) => (
-          <button
-            key={tab.key}
-            type="button"
-            role="tab"
-            aria-selected={tab.key === activeTab}
-            className={tab.key === activeTab ? 'tab active' : 'tab'}
-            onClick={() => setActiveTab(tab.key)}
-          >
-            {tab.label}
-          </button>
-        ))}
-      </nav>
-
       <div className="quick-actions card">
         <button type="button" className="ghost" onClick={() => setActiveTab('functionalities')}>
           Show Functionalities
diff --git a/src/index.css b/src/index.css
index 311edfe..5d04ec1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1052,3 +1052,44 @@ select {
 .project-card {
   display: block;
 }
+
+/* Mobile reachability patch: tabs live immediately under the hero, and the page itself never side-scrolls. */
+html,
+body {
+  overflow-x: hidden;
+}
+
+.hero-stats,
+.hero-stats div,
+.hero-copy,
+.hero-goal {
+  min-width: 0;
+}
+
+.hero-copy,
+.hero-goal {
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 860px) {
+  .tab-bar {
+    top: 0.4rem;
+    margin-top: 0.65rem;
+  }
+
+  .hero-card {
+    padding: 1rem;
+  }
+
+  .hero-stats {
+    gap: 0.5rem;
+  }
+
+  .hero-stats div {
+    padding: 0.7rem;
+  }
+
+  .hero-stats strong {
+    font-size: 1.35rem;
+  }
+}