fix(ui): sidebar footer overlap, scroll containment, usage card default state

- SidebarFooter: add z-10 + bg-sidebar so scrolling nav items don't
  bleed through the footer visually
- ScrollArea (leftnav): add overflow-hidden to properly clip the scroll
  container across browsers
- SidebarUsageCard: start collapsed (defaultOpen={false}) so the footer
  doesn't crush the nav scroll area on short/laptop viewports
This commit is contained in:
KenEzekiel 2026-09-17 08:21:02 +07:00
parent 9cd787386e
commit efbbb4a9a7
3 changed files with 3 additions and 3 deletions

View file

@ -96,7 +96,7 @@ export default function SidebarUsageCard({ accessToken, collapsed, onExpandRail
const meters = buildMeters(data);
return (
<Collapsible defaultOpen className="overflow-hidden rounded-xl border border-sidebar-border bg-sidebar">
<Collapsible defaultOpen={false} className="overflow-hidden rounded-xl border border-sidebar-border bg-sidebar">
<CollapsibleTrigger className="group/usage flex w-full items-center gap-2.5 px-3 py-2.5 text-left transition-colors hover:bg-sidebar-accent">
<span className="flex size-[26px] flex-none items-center justify-center rounded-md bg-sidebar-primary/10 text-sidebar-primary">
<Award className="size-4" strokeWidth={1.75} />

View file

@ -637,7 +637,7 @@ const Sidebar_: React.FC<SidebarProps> = ({
</div>
</SidebarHeader>
<ScrollArea className="min-h-0 flex-1">
<ScrollArea className="min-h-0 flex-1 overflow-hidden">
<nav className="flex flex-col gap-0.5 px-3 pb-3">
{visibleGroups.map((group, gi) => (
<SidebarGroup key={group.groupLabel}>

View file

@ -64,7 +64,7 @@ const SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentPropsWitho
<div
ref={ref}
data-slot="sidebar-footer"
className={cn("flex flex-none flex-col gap-2.5 border-t border-sidebar-border p-3", className)}
className={cn("relative z-10 flex flex-none flex-col gap-2.5 border-t border-sidebar-border bg-sidebar p-3", className)}
{...props}
/>
),