fix: center site picker hover state in collapsed sidebar

Reduce all sidebar section outer padding from px-3 to px-2 so hover
backgrounds are wider and items center properly in the 64px collapsed
width. All sections now consistent: px-2 outer + px-2.5 inner.
This commit is contained in:
Usman Baig
2026-03-18 17:03:08 +01:00
parent 9773735d2b
commit 01dfa6954f

View File

@@ -101,7 +101,7 @@ function SitePicker({ sites, siteId, collapsed }: { sites: Site[]; siteId: strin
)
return (
<div className="relative mb-4 px-3" ref={ref}>
<div className="relative mb-4 px-2" ref={ref}>
<button
onClick={() => setOpen(!open)}
className="w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 overflow-hidden"
@@ -249,7 +249,7 @@ export default function Sidebar({
<SitePicker sites={sites} siteId={siteId} collapsed={c} />
{/* Nav Groups */}
<nav className="flex-1 overflow-y-auto overflow-x-hidden px-3 space-y-4">
<nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 space-y-4">
{NAV_GROUPS.map((group) => (
<div key={group.label}>
<div className="h-5 flex items-center overflow-hidden">
@@ -267,7 +267,7 @@ export default function Sidebar({
</nav>
{/* Bottom */}
<div className="border-t border-neutral-200/60 dark:border-neutral-800/60 px-3 py-3 space-y-0.5 shrink-0">
<div className="border-t border-neutral-200/60 dark:border-neutral-800/60 px-2 py-3 space-y-0.5 shrink-0">
{canEdit && (
<NavLink item={SETTINGS_ITEM} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={handleNavigate} />
)}