From 4ca5c775dcf6232a56d17e09f19d7d55041cbd7a Mon Sep 17 00:00:00 2001
From: cc <codecolorist@gmail.com>
Date: Tue, 14 Apr 2026 19:36:02 +0200
Subject: [PATCH] Optimize layout for maximum content space

- Fix navbar height to h-14 (56px) for consistency
- Use flexbox layout to fill available viewport height
- Reduce header padding and margins
- Add min-h-0 for proper flex overflow handling
---
 src/app/os/files/page.tsx | 52 +++++++++++++------------
 src/app/os/layout.tsx     | 80 +++++++++++++++++++--------------------
 src/components/navtop.tsx |  2 +-
 3 files changed, 67 insertions(+), 67 deletions(-)

diff --git a/src/app/os/files/page.tsx b/src/app/os/files/page.tsx
index 54c0a1f..c412c25 100644
--- a/src/app/os/files/page.tsx
+++ b/src/app/os/files/page.tsx
@@ -46,8 +46,8 @@ export default function Files() {
   }, [isFiltering]);
 
   return (
-    <div>
-      <div className="flex flex-col sm:flex-row sm:items-center gap-3 mb-6">
+    <div className="flex flex-col h-full">
+      <div className="flex flex-col sm:flex-row sm:items-center gap-2 mb-4 shrink-0">
         <div className="relative flex-1 max-w-md">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
           <Input
@@ -103,29 +103,31 @@ export default function Files() {
         </div>
       </div>
 
-      {loading ? (
-        <div className="space-y-2">
-          {Array.from({ length: 6 }).map((_, i) => (
-            <div key={i} className="flex items-center gap-2 py-1">
-              <div className="h-4 w-4 bg-muted rounded animate-pulse" />
-              <div
-                className="h-5 bg-muted rounded animate-pulse"
-                style={{ width: `${120 + Math.random() * 200}px` }}
-              />
-            </div>
-          ))}
-        </div>
-      ) : filtered.length === 0 ? (
-        <div className="text-center py-12 text-muted-foreground">
-          {files.length === 0 ? (
-            <p>No paths found for this OS version.</p>
-          ) : (
-            <p>No paths match &quot;{keyword}&quot;</p>
-          )}
-        </div>
-      ) : (
-        <FileSystem os={os} list={filtered} expandAll={expandAll} />
-      )}
+      <div className="flex-1 min-h-0 overflow-auto">
+        {loading ? (
+          <div className="space-y-2">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div key={i} className="flex items-center gap-2 py-1">
+                <div className="h-4 w-4 bg-muted rounded animate-pulse" />
+                <div
+                  className="h-5 bg-muted rounded animate-pulse"
+                  style={{ width: `${120 + Math.random() * 200}px` }}
+                />
+              </div>
+            ))}
+          </div>
+        ) : filtered.length === 0 ? (
+          <div className="text-center py-12 text-muted-foreground">
+            {files.length === 0 ? (
+              <p>No paths found for this OS version.</p>
+            ) : (
+              <p>No paths match &quot;{keyword}&quot;</p>
+            )}
+          </div>
+        ) : (
+          <FileSystem os={os} list={filtered} expandAll={expandAll} />
+        )}
+      </div>
     </div>
   );
 }
diff --git a/src/app/os/layout.tsx b/src/app/os/layout.tsx
index ad6bd0b..98562f9 100644
--- a/src/app/os/layout.tsx
+++ b/src/app/os/layout.tsx
@@ -38,50 +38,48 @@ export default function OSDetailLayout({
   }, [os]);
 
   return (
-    <div className="p-4 md:p-8" suppressHydrationWarning>
-      <header className="mb-6">
-        <div className="flex flex-col sm:flex-row sm:items-center gap-4">
-          <div className="flex items-center gap-4">
-            <Breadcrumb>
-              <BreadcrumbList>
-                <BreadcrumbItem>
-                  <BreadcrumbLink href={addBasePath("/")}>Home</BreadcrumbLink>
-                </BreadcrumbItem>
-                <BreadcrumbSeparator />
-                <BreadcrumbItem>
-                  <span className="text-muted-foreground">
-                    {os?.split("/")[0]}
-                  </span>
-                </BreadcrumbItem>
-              </BreadcrumbList>
-            </Breadcrumb>
-            <VersionSwitcher currentOs={os} />
-          </div>
-
-          <nav className="flex items-center gap-4 text-sm sm:ml-auto">
-            <Link
-              href={`/os/keys?os=${os}`}
-              className={currentPage === "keys" ? "font-medium" : "text-muted-foreground hover:text-foreground"}
-            >
-              Entitlement Keys
-            </Link>
-            <Link
-              href={`/os/files?os=${os}`}
-              className={currentPage === "files" ? "font-medium" : "text-muted-foreground hover:text-foreground"}
-            >
-              Browse Files
-            </Link>
-            {currentPage === "find" && (
-              <span className="font-medium">Search Results</span>
-            )}
-            {currentPage === "bin" && (
-              <span className="font-medium">Binary Detail</span>
-            )}
-          </nav>
+    <div className="flex flex-col h-[calc(100vh-56px)] p-4 md:p-6" suppressHydrationWarning>
+      <header className="flex flex-col sm:flex-row sm:items-center gap-2 mb-4 shrink-0">
+        <div className="flex items-center gap-4">
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbLink href={addBasePath("/")}>Home</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <span className="text-muted-foreground">
+                  {os?.split("/")[0]}
+                </span>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <VersionSwitcher currentOs={os} />
         </div>
+
+        <nav className="flex items-center gap-4 text-sm sm:ml-auto">
+          <Link
+            href={`/os/keys?os=${os}`}
+            className={currentPage === "keys" ? "font-medium" : "text-muted-foreground hover:text-foreground"}
+          >
+            Entitlement Keys
+          </Link>
+          <Link
+            href={`/os/files?os=${os}`}
+            className={currentPage === "files" ? "font-medium" : "text-muted-foreground hover:text-foreground"}
+          >
+            Browse Files
+          </Link>
+          {currentPage === "find" && (
+            <span className="font-medium">Search Results</span>
+          )}
+          {currentPage === "bin" && (
+            <span className="font-medium">Binary Detail</span>
+          )}
+        </nav>
       </header>
 
-      <div>{children}</div>
+      <div className="flex-1 min-h-0">{children}</div>
     </div>
   );
 }
diff --git a/src/components/navtop.tsx b/src/components/navtop.tsx
index 9107c78..4c7d04e 100644
--- a/src/components/navtop.tsx
+++ b/src/components/navtop.tsx
@@ -34,7 +34,7 @@ function ThemeToggle() {
 
 export function NavTop() {
   return (
-    <header className="flex flex-row justify-between items-center px-4 md:px-8 py-4 w-full border-b border-border bg-background text-foreground">
+    <header className="flex flex-row justify-between items-center px-4 md:px-8 h-14 w-full border-b border-border bg-background text-foreground">
       <h1 className="text-2xl font-bold">
         <Link href="/" className="hover:text-muted-foreground">
           entdb