From e935dc08f1799ba20d77d976a9babe53897a4411 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Wed, 11 Mar 2026 08:06:28 +0800
Subject: [PATCH] Fix admin portal: restore desktop tab layout, mobile-only
 changes

- Nav: justify-evenly on mobile, justify-start on desktop
- Title: "Admin Portal" on desktop, "Admin" on mobile
- Restore mr-6 spacing on title group for desktop
- Tab labels: icon-only on mobile, icon+label on sm+

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/admin/AdminPortal.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/admin/AdminPortal.tsx b/frontend/src/components/admin/AdminPortal.tsx
index 2f8e5ad..5d72911 100644
--- a/frontend/src/components/admin/AdminPortal.tsx
+++ b/frontend/src/components/admin/AdminPortal.tsx
@@ -19,15 +19,18 @@ export default function AdminPortal() {
       {/* Portal header with tab navigation */}
       <div className="shrink-0 border-b bg-card overflow-hidden">
         <div className="px-3 md:px-6 h-14 md:h-16 flex items-center gap-2 md:gap-4">
-          <div className="flex items-center gap-2 shrink-0">
+          <div className="flex items-center gap-2 shrink-0 md:mr-6">
             <div className="p-1.5 rounded-md bg-red-500/10">
               <ShieldCheck className="h-5 w-5 text-red-400" />
             </div>
-            <h1 className="font-heading text-base md:text-2xl font-bold tracking-tight">Admin</h1>
+            <h1 className="font-heading text-base md:text-2xl font-bold tracking-tight">
+              <span className="hidden md:inline">Admin Portal</span>
+              <span className="md:hidden">Admin</span>
+            </h1>
           </div>
 
-          {/* Horizontal tab navigation */}
-          <nav className="flex items-center justify-evenly flex-1 h-full min-w-0 overflow-x-auto">
+          {/* Horizontal tab navigation — evenly spaced on mobile, left-aligned on desktop */}
+          <nav className="flex items-center justify-evenly md:justify-start flex-1 md:flex-none md:gap-1 h-full min-w-0 overflow-x-auto">
             {tabs.map(({ label, path, icon: Icon }) => {
               const isActive = location.pathname.startsWith(path);
               return (
@@ -37,7 +40,7 @@ export default function AdminPortal() {
                   title={label}
                   aria-label={label}
                   className={cn(
-                    'flex items-center justify-center gap-1.5 px-2.5 md:px-4 h-full text-sm font-medium transition-colors duration-150 border-b-2 -mb-px whitespace-nowrap',
+                    'flex items-center justify-center md:justify-start gap-1.5 px-2.5 md:px-4 h-full text-sm font-medium transition-colors duration-150 border-b-2 -mb-px whitespace-nowrap',
                     isActive
                       ? 'text-accent border-accent'
                       : 'text-muted-foreground hover:text-foreground border-transparent'