valknar/sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fix admin mobile nav overflow breaking layout on small screens

Browse Source 
Mobile nav now scrolls horizontally with hidden scrollbar; nav items
don't shrink and show icon-only on xs, icon+label on sm and up.
Added scrollbar-none utility to app.css.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-03-08 10:39:12 +01:00
parent 76d71ee7c3
commit 7af9c0d7ca
2 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/frontend/src/app.css
View File

@@ -3,6 +3,13 @@
@plugin "@iconify/tailwind4"; @plugin "@iconify/tailwind4";
@utility scrollbar-none {
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
@custom-variant dark (&:where(.dark, .dark *)); @custom-variant dark (&:where(.dark, .dark *));
@custom-variant hover (&:hover); @custom-variant hover (&:hover);

12
packages/frontend/src/routes/admin/+layout.svelte
View File

@@ -24,27 +24,29 @@
<div class="min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5"> <div class="min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5">
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<!-- Mobile top nav --> <!-- Mobile top nav -->
<div class="lg:hidden flex items-center gap-2 py-3 border-b border-border/40"> <div class="lg:hidden border-b border-border/40">
<div class="flex items-center gap-1 overflow-x-auto py-2 scrollbar-none">
<a <a
href="/" href="/"
class="text-xs text-muted-foreground hover:text-foreground transition-colors shrink-0 mr-2" class="shrink-0 text-xs text-muted-foreground hover:text-foreground transition-colors px-2"
> >
{$_("admin.nav.back_mobile")} {$_("admin.nav.back_mobile")}
</a> </a>
{#each navLinks as link (link.href)} {#each navLinks as link (link.href)}
<a <a
href={link.href} href={link.href}
class={`flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${ class={`shrink-0 flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm font-medium transition-colors ${
isActive(link.href) isActive(link.href)
? "bg-primary/10 text-primary" ? "bg-primary/10 text-primary"
: "text-muted-foreground hover:text-foreground hover:bg-muted/50" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
}`} }`}
> >
<span class={`${link.icon} h-4 w-4`}></span> <span class={`${link.icon} h-4 w-4 shrink-0`}></span>
{link.name} <span class="hidden sm:inline">{link.name}</span>
</a> </a>
{/each} {/each}
</div> </div>
</div>
<!-- Desktop layout --> <!-- Desktop layout -->
<div class="flex min-h-screen"> <div class="flex min-h-screen">