rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix admin portal: restore desktop tab layout, mobile-only changes

Browse Source 
- 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>
This commit is contained in:
Kyle 2026-03-11 08:06:28 +08:00
parent 4e91944956
commit e935dc08f1
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/admin/AdminPortal.tsx
View File

@ -19,15 +19,18 @@ export default function AdminPortal() {
{/* Portal header with tab navigation */} {/* Portal header with tab navigation */}
<div className="shrink-0 border-b bg-card overflow-hidden"> <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="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"> <div className="p-1.5 rounded-md bg-red-500/10">
<ShieldCheck className="h-5 w-5 text-red-400" /> <ShieldCheck className="h-5 w-5 text-red-400" />
</div> </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> </div>
{/* Horizontal tab navigation */} {/* Horizontal tab navigation — evenly spaced on mobile, left-aligned on desktop */}
<nav className="flex items-center justify-evenly flex-1 h-full min-w-0 overflow-x-auto"> <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 }) => { {tabs.map(({ label, path, icon: Icon }) => {
const isActive = location.pathname.startsWith(path); const isActive = location.pathname.startsWith(path);
return ( return (
@ -37,7 +40,7 @@ export default function AdminPortal() {
title={label} title={label}
aria-label={label} aria-label={label}
className={cn( 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 isActive
? 'text-accent border-accent' ? 'text-accent border-accent'
: 'text-muted-foreground hover:text-foreground border-transparent' : 'text-muted-foreground hover:text-foreground border-transparent'