From eba61d2fb9e4e8b5e48d2e6d721730a20b375f58 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Mon, 13 Jul 2026 18:10:16 +0200
Subject: [PATCH] Fix mobile responsive issues

- Remove duplicate home link in mobile nav
- Remove overflow-hidden clipping main content
- Improve mobile menu scrolling and spacing
- Make top-header currencies wrap on small screens
- Reduce site-header height on mobile
- Add global mobile CSS overrides for tables, padding, fonts
---
 src/app/globals.css            | 51 ++++++++++++++++++++++++++++++++++
 src/app/layout.tsx             |  6 ++--
 src/components/mobile-nav.tsx  |  4 +--
 src/components/navigation.tsx  |  2 +-
 src/components/site-header.tsx |  4 +--
 src/components/top-header.tsx  |  4 +--
 6 files changed, 61 insertions(+), 10 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 098a38d62e..f89f3acd6e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -970,3 +970,54 @@ tbody tr:hover {
     text-align: left;
   }
 }
+
+/* ── Mobile responsive overrides ──────────────────────────── */
+@media (max-width: 48rem) {
+  h1 {
+    font-size: clamp(1.25rem, 5vw, var(--size-heading-h1, 30px));
+  }
+  h2 {
+    font-size: clamp(1.1rem, 4vw, var(--size-heading-h2, 22px));
+  }
+  .hero {
+    padding: 1.25rem 1rem;
+  }
+  .card {
+    padding: 0.85rem 1rem;
+  }
+  .admin-card {
+    padding: 0.85rem;
+  }
+  .admin-filter-bar input,
+  .admin-filter-bar select {
+    min-width: 140px;
+  }
+  .admin-page td,
+  .admin-page th {
+    white-space: nowrap;
+    padding: 0.5rem 0.6rem;
+    font-size: 0.78rem;
+  }
+  .stat-grid {
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  }
+  .btn {
+    font-size: 13px;
+    padding: 0.4rem 0.85rem;
+  }
+  .content-card-head {
+    padding: 0.7rem 0.85rem;
+  }
+  .content-card-body {
+    padding: 0.85rem;
+  }
+}
+
+/* make tables scroll on small screens */
+@media (max-width: 640px) {
+  table {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 993f63373b..ab0a6bd084 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -91,9 +91,9 @@ export default async function RootLayout({ children }: { children: ReactNode })
               <TopHeader />
               <SiteHeader />
               <Navigation />
-              <main className="overflow-hidden">
-                <div className="mx-auto mt-10 grid max-w-7xl grid-cols-12 gap-x-3 gap-y-8 p-6 md:mt-0">
-                  <div className="col-span-12">{children}</div>
+              <main>
+                <div className="mx-auto mt-6 grid max-w-7xl grid-cols-12 gap-x-3 gap-y-6 px-4 py-4 md:mt-0 md:p-6">
+                  <div className="col-span-12 min-w-0">{children}</div>
                 </div>
               </main>
               <SiteFooter />
diff --git a/src/components/mobile-nav.tsx b/src/components/mobile-nav.tsx
index 60d8a0292d..30dacbf945 100644
--- a/src/components/mobile-nav.tsx
+++ b/src/components/mobile-nav.tsx
@@ -62,11 +62,11 @@ export function MobileNav({ children, menuLabel = "Open menu", closeLabel = "Clo
       <div
         id="mobile-menu"
         role="menu"
-        className={`${open ? "max-h-[80vh] opacity-100" : "max-h-0 opacity-0 pointer-events-none md:pointer-events-auto"} overflow-hidden transition-all duration-300 ease-in-out md:!max-h-none md:!opacity-100 md:!overflow-visible md:flex md:items-center md:gap-x-1 w-full md:w-auto`}
+        className={`${open ? "max-h-[80vh] opacity-100" : "max-h-0 opacity-0 pointer-events-none md:pointer-events-auto"} overflow-y-auto transition-all duration-300 ease-in-out md:!max-h-none md:!opacity-100 md:!overflow-visible md:flex md:items-center md:gap-x-1 w-full md:w-auto`}
         style={{ backgroundColor: "var(--color-navbar)" }}
       >
         <div
-          className="flex flex-col md:flex-row md:items-center gap-y-0.5 p-3 md:p-0 rounded-xl md:rounded-none border md:border-0 shadow-lg md:shadow-none mt-2 md:mt-0"
+          className="flex flex-col md:flex-row md:items-center gap-y-0.5 p-2 md:p-0 rounded-xl md:rounded-none border md:border-0 shadow-lg md:shadow-none mt-1 md:mt-0"
           style={{
             borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
           }}
diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
index fc29559bab..2d22ddaed3 100644
--- a/src/components/navigation.tsx
+++ b/src/components/navigation.tsx
@@ -21,7 +21,7 @@ export async function Navigation() {
           style={{ backgroundColor: "var(--color-primary, #eeb425)" }}
         />
 
-        <div className="flex items-center gap-x-1 md:gap-x-1 flex-1 md:flex-none">
+        <div className="hidden md:flex items-center gap-x-1">
           <Link href="/" className="nav-item shrink-0">
             <Image
               src="/assets/images/icons/navigation/me.png"
diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
index ff2b356ed5..54fff3fd01 100644
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -26,7 +26,7 @@ export async function SiteHeader() {
     header && header !== "/assets/images/background.png" ? header : "/assets/images/banner.png";
 
   return (
-    <div className="site-header relative w-full overflow-hidden" style={{ minHeight: "18rem" }}>
+    <div className="site-header relative w-full overflow-hidden" style={{ minHeight: "clamp(12rem, 30vw, 18rem)" }}>
       {/* Background image */}
       <div className="absolute inset-0" style={{ background: `url(${bannerUrl}) center/cover no-repeat` }} />
 
@@ -59,7 +59,7 @@ export async function SiteHeader() {
       />
 
       {/* Content */}
-      <div className="relative flex flex-col items-center justify-center px-4 py-12 min-h-[18rem]">
+      <div className="relative flex flex-col items-center justify-center px-4 py-8 md:py-12 min-h-[clamp(12rem,30vw,18rem)]">
         <Link href="/" className="transition-transform duration-300 hover:scale-105 mb-8">
           {logo ? (
             <Image
diff --git a/src/components/top-header.tsx b/src/components/top-header.tsx
index ef476eb9bf..0beecfdbad 100644
--- a/src/components/top-header.tsx
+++ b/src/components/top-header.tsx
@@ -58,13 +58,13 @@ export async function TopHeader() {
   return (
     <div style={{ backgroundColor: "var(--color-navbar)" }}>
       <div className="max-w-7xl min-h-[60px] px-4 flex items-center justify-between mx-auto">
-        <div className="flex gap-x-6">
+        <div className="flex flex-wrap gap-x-3 sm:gap-x-6">
           <Currency icon="nav-credit-icon" amount={credits} label="Credits" />
           <Currency icon="nav-ducket-icon" amount={duckets} label="Duckets" />
           <Currency icon="nav-diamond-icon" amount={diamonds} label="Diamonds" />
         </div>
 
-        <div className="flex items-center gap-x-3">
+        <div className="flex items-center gap-x-1 sm:gap-x-3">
           {isStaff ? (
             <details className="relative">
               <summary