fix(ui): improve admin layout & shipping settings responsiveness on mobile

Author: lead-matrix

app/admin/settings/shipping/page.tsx

@@ -1,9 +1,5 @@
 import ShippingRateManager from "@/components/admin/ShippingRateManager";
 
 export default function ShippingSettingsPage() {
-    return (
-        <div className="p-8">
-            <ShippingRateManager />
-        </div>
-    );
+    return <ShippingRateManager />;
 }

components/admin/AdminLayoutClient.tsx

@@ -206,11 +206,30 @@ export default function AdminLayoutClient({ children }: AdminLayoutClientProps)
       </aside>
 
       {/* ── MAIN CONTENT ── */}
-      <main className="flex-1 overflow-y-auto bg-[#0B0B0D] p-6 md:p-8 pb-24 md:pb-8 scroll-smooth">
-        <div className="max-w-7xl mx-auto">
-          {children}
-        </div>
-      </main>
+      <div className="flex-1 flex flex-col overflow-hidden bg-[#0B0B0D]">
+        {/* Mobile Header */}
+        <header className="md:hidden flex items-center justify-between px-5 py-4 border-b border-white/[0.06] bg-[#0D0D0F] z-20">
+          <Link href="/admin" className="flex flex-col">
+            <span className="font-bold text-sm tracking-wide text-white">
+              DINA <span className="text-[#D4AF37]">ADMIN</span>
+            </span>
+          </Link>
+          <div className="flex items-center gap-4">
+            <Link href="/" target="_blank" className="text-white/30 hover:text-[#D4AF37] transition-colors">
+              <Store className="w-5 h-5" />
+            </Link>
+            <button onClick={signOut} className="text-white/30 hover:text-red-400 transition-colors">
+              <LogOut className="w-5 h-5" />
+            </button>
+          </div>
+        </header>
+
+        <main className="flex-1 overflow-y-auto p-4 md:p-8 pb-24 md:pb-8 scroll-smooth">
+          <div className="max-w-7xl mx-auto">
+            {children}
+          </div>
+        </main>
+      </div>
 
       {/* ── MOBILE BOTTOM NAV ── */}
       <nav className="md:hidden fixed bottom-0 left-0 w-full bg-[#0D0D0F] border-t border-white/[0.06] z-50 px-2 py-2 pb-safe">

components/admin/ShippingRateManager.tsx

@@ -108,7 +108,7 @@ export default function ShippingRateManager({ initialConfig }: { initialConfig?:
   return (
     <div className="space-y-8 pb-24 animate-luxury-fade">
       {/* Header */}
-      <div className="flex items-end justify-between">
+      <div className="flex flex-col md:flex-row items-start md:items-end justify-between gap-4">
         <div>
           <h1 className="text-3xl font-serif text-white tracking-wide">Shipping Rates</h1>
           <p className="text-xs text-white/40 uppercase tracking-widest mt-1">
@@ -126,7 +126,7 @@ export default function ShippingRateManager({ initialConfig }: { initialConfig?:
       </div>
 
       {/* Tabs */}
-      <div className="flex border-b border-white/10">
+      <div className="flex border-b border-white/10 overflow-x-auto custom-scrollbar whitespace-nowrap pb-1">
         {TABS.map(tab => (
           <button
             key={tab.id}