+1 -1

web/src/lib/components/repo/RepoIndexView.svelte

View file Reviewed

··· 29 29 const refsCapped = $derived(data.refs.capped); 30 30 </script> 31 31 32 32 - <TabPanel class="relative mx-auto mt-px w-full"> 32 32 + <TabPanel> 33 33 {#if data.needsUpgrade} 34 34 <div class="flex h-96 items-center justify-center text-center text-foreground-danger"> 35 35 <div>

+1 -1

web/src/lib/components/repo/RepoTabs.svelte

View file Reviewed

··· 40 40 ]); 41 41 </script> 42 42 43 43 - <Tabs {tabs} {active} label="repository sections" /> 43 43 + <Tabs overlapBottom={true} {tabs} {active} label="repository sections" />

+1 -5

web/src/lib/components/ui/TabPanel.svelte

View file Reviewed

··· 1 1 <script module lang="ts"> 2 2 import { tv } from "tailwind-variants"; 3 3 4 4 - // the surface that docks directly beneath a <Tabs> bar. it pulls itself up 1px 5 5 - // so its top border tucks behind the bar, where the active tab's raised, opaque 6 6 - // background hides the seam — producing the connected "folder tab" look. keep it 7 7 - // flush against the tab bar (no margin between them) for the join to line up. 8 4 export const tabPanel = tv({ 9 9 - base: "-mt-px rounded-sm border border-border-default bg-background-default text-foreground-default", 5 5 + base: "rounded-sm border border-border-default bg-background-default text-foreground-default", 10 6 variants: { 11 7 // the common surface padding; turn off to lay out children yourself 12 8 padded: {

+3 -2

web/src/lib/components/ui/Tabs.svelte

View file Reviewed

··· 19 19 active: string; 20 20 label?: string; 21 21 vertical?: boolean; 22 22 + overlapBottom?: boolean; 22 23 } 23 24 24 24 - let { tabs, active, label, vertical = false }: Props = $props(); 25 25 + let { tabs, active, label, vertical = false, overlapBottom = false }: Props = $props(); 25 26 26 27 const navClass = $derived( 27 28 vertical ··· 43 44 }`; 44 45 </script> 45 46 46 46 - <nav class={navClass} aria-label={label}> 47 47 + <nav class={[navClass, overlapBottom && "-mb-px"]} aria-label={label}> 47 48 {#each tabs as tab (tab.id)} 48 49 {@const isActive = active === tab.id} 49 50 {@const Glyph = tab.icon}