Left rail: vertically center the claw stack (WorkClaw)
The rail's middle scroll container was a plain block (flex-1 overflow-y-auto py-4), so the claws clustered at the top with empty space below. Match WorkClaw: make it a centered flex column — flex w-full flex-col items-center [justify-content:safe_center] overscroll-contain [&::-webkit-scrollbar]:hidden — so the stack sits in the vertical middle with balanced space above/below (safe = no clipping on overflow). To preserve last commit's left-aligned rows under items-center, the RosterList ul and the New-claw link are now w-full (else they'd shrink/center). Row gap 0.5→1 to match WorkClaw. (Capture shows no gap on the container itself — the reviewer's suggested gap-1 there was dropped.) typecheck/lint(0)/86 unit/30 E2E/6 visual green; workspace-home baseline updated. Co-Authored-By: Claude Opus 4.8 <[email protected]>
This commit is contained in:
co-authored by
Claude Opus 4.8
parent
d17cc3797b
commit
02456dfdc3
@@ -78,7 +78,9 @@ export function LeftRail({ user, roster, creditsBalance }: LeftRailProps) {
|
|||||||
<X aria-hidden size={16} />
|
<X aria-hidden size={16} />
|
||||||
</button>
|
</button>
|
||||||
</header>
|
</header>
|
||||||
<div className="flex-1 overflow-y-auto py-4">
|
{/* Vertically centers the claw stack in the rail (safe = no clipping
|
||||||
|
when it overflows), scrollbar hidden — matches WorkClaw. */}
|
||||||
|
<div className="flex w-full flex-1 flex-col items-center [justify-content:safe_center] overflow-y-auto overscroll-contain py-4 [&::-webkit-scrollbar]:hidden">
|
||||||
{roster.length === 0 ? (
|
{roster.length === 0 ? (
|
||||||
<p className="px-3 text-xs text-muted-foreground">No claws yet</p>
|
<p className="px-3 text-xs text-muted-foreground">No claws yet</p>
|
||||||
) : (
|
) : (
|
||||||
@@ -87,7 +89,7 @@ export function LeftRail({ user, roster, creditsBalance }: LeftRailProps) {
|
|||||||
<Link
|
<Link
|
||||||
href="/claws/new"
|
href="/claws/new"
|
||||||
aria-label="New claw"
|
aria-label="New claw"
|
||||||
className="group mt-0.5 flex items-center px-4 py-1 md:group-data-[collapsed=true]/rail:justify-center md:group-data-[collapsed=true]/rail:px-0"
|
className="group mt-0.5 flex w-full items-center px-4 py-1 md:group-data-[collapsed=true]/rail:justify-center md:group-data-[collapsed=true]/rail:px-0"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-hidden
|
aria-hidden
|
||||||
|
|||||||
@@ -51,7 +51,7 @@ export function RosterList({ roster }: { roster: Agent[] }) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ul aria-label="Your claws" className="flex flex-col gap-0.5">
|
<ul aria-label="Your claws" className="flex w-full flex-col gap-1">
|
||||||
{ordered.map((agent) => (
|
{ordered.map((agent) => (
|
||||||
<li key={agent.id} className="w-full">
|
<li key={agent.id} className="w-full">
|
||||||
<AgentRosterItem
|
<AgentRosterItem
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
Reference in New Issue
Block a user