Left rail: match WorkClaw sizing/weights/container

Measured sidebar parity:
- Container: dropped the aside's px-1 so the rail is the full w-rail 176px
  (was 168px inner); added bg-background (solid #0a0a0a, was transparent);
  padding now 8px 0 24px (pt-2 pb-6).
- Bottom nav (Skills/Apps/Team/Credits): 14px/400 → 12px/500 (text-xs
  font-medium, leading-[1.3]); trailing credits balance likewise.
- Claw-name labels: active 400→600 (font-semibold), inactive 400→500
  (font-medium); kept 12px.
Verified live at 1440: rail width 176, bg rgb(10,10,10), nav 12px/500,
active claw name 12px/600. Rail-wide change → regenerated all 7 visual
baselines; full suite (37) green.

Co-Authored-By: Claude Fable 5 <[email protected]>
This commit is contained in:
Omar Sobh
2026-06-11 15:25:38 -05:00
co-authored by Claude Fable 5
parent ddc1f8fbe0
commit 8c9b750673
8 changed files with 6 additions and 6 deletions
@@ -49,10 +49,10 @@ export function AgentRosterItem({
</span> </span>
</span> </span>
<span <span
className={`max-w-full truncate text-xs transition-colors duration-(--duration-normal) ease-app md:group-data-[collapsed=true]/rail:hidden ${ className={`max-w-full truncate text-xs leading-[1.3] transition-colors duration-(--duration-normal) ease-app md:group-data-[collapsed=true]/rail:hidden ${
active active
? "text-foreground" ? "font-semibold text-foreground"
: "text-muted-foreground group-hover:text-foreground" : "font-medium text-muted-foreground group-hover:text-foreground"
}`} }`}
> >
{agent.name} {agent.name}
@@ -25,7 +25,7 @@ export function GlobalNavItem({
<Link <Link
href={href} href={href}
aria-current={active ? "page" : undefined} aria-current={active ? "page" : undefined}
className={`flex h-8 items-center gap-3 rounded-full px-3 text-sm transition-colors duration-(--duration-normal) ease-app md:group-data-[collapsed=true]/rail:justify-center md:group-data-[collapsed=true]/rail:px-0 ${ className={`flex h-8 items-center gap-3 rounded-full px-3 text-xs font-medium leading-[1.3] transition-colors duration-(--duration-normal) ease-app md:group-data-[collapsed=true]/rail:justify-center md:group-data-[collapsed=true]/rail:px-0 ${
active active
? "text-foreground" ? "text-foreground"
: "text-muted-foreground hover:bg-hover-bg hover:text-foreground" : "text-muted-foreground hover:bg-hover-bg hover:text-foreground"
@@ -42,7 +42,7 @@ export function GlobalNavItem({
{trailing != null && ( {trailing != null && (
<span <span
aria-hidden aria-hidden
className="ml-auto text-sm md:group-data-[collapsed=true]/rail:hidden" className="ml-auto text-xs font-medium md:group-data-[collapsed=true]/rail:hidden"
> >
{trailing} {trailing}
</span> </span>
+1 -1
View File
@@ -60,7 +60,7 @@ export function LeftRail({ user, roster, creditsBalance }: LeftRailProps) {
)} )}
<aside <aside
data-collapsed={collapsed ? "true" : "false"} data-collapsed={collapsed ? "true" : "false"}
className={`group/rail z-50 flex h-dvh w-rail shrink-0 flex-col px-1 transition-[transform,width] duration-(--duration-normal) ease-app max-md:fixed max-md:bg-background max-md:shadow-edge ${ className={`group/rail z-50 flex h-dvh w-rail shrink-0 flex-col bg-background pt-2 pb-6 transition-[transform,width] duration-(--duration-normal) ease-app max-md:fixed max-md:shadow-edge ${
open ? "max-md:translate-x-0" : "max-md:-translate-x-full" open ? "max-md:translate-x-0" : "max-md:-translate-x-full"
} ${collapsed ? "md:w-20" : ""}`} } ${collapsed ? "md:w-20" : ""}`}
> >
Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 198 KiB

After

Width:  |  Height:  |  Size: 198 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB