From fea2d5a2de0d685804b56f8635f1b7a39026d755 Mon Sep 17 00:00:00 2001
From: cc <codecolorist@gmail.com>
Date: Wed, 15 Apr 2026 23:28:15 +0200
Subject: [PATCH] Fix mobile header overflow and improve responsive layout

- Move platform filter buttons to content area on mobile
- Hide platform name in OS breadcrumb on mobile (redundant with version)
- Ensure Keys/Files tabs stay visible on all screen sizes
- Allow header left group to wrap on narrow viewports
---
 src/components/navtop.tsx | 12 ++++++------
 src/components/oslist.tsx | 18 ++++++++++++++++++
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/navtop.tsx b/src/components/navtop.tsx
index 9da44ac..14f0581 100644
--- a/src/components/navtop.tsx
+++ b/src/components/navtop.tsx
@@ -39,13 +39,13 @@ function OSBreadcrumb({ os, currentPage }: { os: string; currentPage: string })
   const [platform] = os.split("/");
 
   return (
-    <div className="flex items-center gap-4 text-sm min-w-0 flex-1">
-      <div className="flex items-center gap-2 shrink-0">
-        <span className="text-muted-foreground">{platform}</span>
+    <div className="flex items-center gap-2 sm:gap-4 text-sm min-w-0">
+      <div className="flex items-center gap-1 sm:gap-2 shrink-0">
+        <span className="text-muted-foreground hidden sm:inline">{platform}</span>
         <VersionSwitcher currentOs={os} />
       </div>
 
-      <div className="inline-flex rounded-lg border border-border p-1 bg-muted/30">
+      <div className="inline-flex rounded-lg border border-border p-1 bg-muted/30 shrink-0">
         <Link
           href={`/os/keys?os=${os}`}
           className={`flex items-center gap-1 px-2 py-1 text-sm rounded-md transition-colors whitespace-nowrap ${
@@ -125,14 +125,14 @@ export function NavTop() {
     <header className="sticky top-0 z-50 shrink-0 border-b border-border bg-background">
       <div className="flex flex-wrap items-center gap-x-4 gap-y-2 px-4 md:px-6 py-3">
         {/* Left group: logo + breadcrumb + left portal */}
-        <div className="flex items-center gap-4 min-w-0 shrink-0">
+        <div className="flex items-center gap-4 min-w-0 flex-wrap">
           <h1 className="text-xl font-bold shrink-0">
             <Link href="/" className="hover:text-muted-foreground transition-colors">
               entdb
             </Link>
           </h1>
           {isHome && <HomeControls />}
-          {isHome && <div id={HEADER_PORTAL_LEFT_ID} className="flex items-center" />}
+          {isHome && <div id={HEADER_PORTAL_LEFT_ID} className="hidden sm:flex items-center" />}
           {isOSPage && os && <OSBreadcrumb os={os} currentPage={currentPage} />}
         </div>
 
diff --git a/src/components/oslist.tsx b/src/components/oslist.tsx
index 612f64d..1df9261 100644
--- a/src/components/oslist.tsx
+++ b/src/components/oslist.tsx
@@ -230,6 +230,7 @@ export default function OSList() {
 
       {!loading && groups.length > 0 && (
         <>
+          {/* Platform buttons - in header on desktop, inline on mobile */}
           <HeaderPortal position="left">
             <div className="flex items-center gap-1">
               {groups.map((group) => (
@@ -271,6 +272,23 @@ export default function OSList() {
             </div>
           </HeaderPortal>
 
+          {/* Mobile platform buttons - shown inline in content */}
+          <div className="flex sm:hidden items-center gap-1 mb-4">
+            {groups.map((group) => (
+              <button
+                key={group.name}
+                onClick={() => togglePlatform(group.name)}
+                className={`px-2 py-1 text-sm rounded-md transition-colors ${
+                  selectedPlatforms.has(group.name)
+                    ? "bg-foreground text-background font-medium"
+                    : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
+                }`}
+              >
+                {getPlatformName(group.name)}
+              </button>
+            ))}
+          </div>
+
           {isFiltering && (
             <div className="mb-3 text-sm text-muted-foreground">
               {filteredCount} of {totalCount} builds