tiennm99/ccs
1
0
Fork 0
mirror of https://github.com/tiennm99/ccs.git synced 2026-07-16 04:18:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): reserve leading chevron column so trace and leaf rows align

Browse Source 
Trace rows pushed the TIME column ~30px right because the expand chevron
was an inline flex child while leaf rows had nothing in that position.
Result: every column drifted right whenever a trace row was visible.

Reserve a 16px slot at the start of every row (header + leaf + trace).
Leaf rows render an empty span; trace rows render the chevron centered
inside the slot. All columns now share the same x-coordinates regardless
of row type.

Refs #1138
This commit is contained in:
Tam Nhu Tran
2026-04-30 14:56:32 -04:00
parent 2d95e40ff9
commit 0dfb7b8583
3 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/logs/logs-entry-list.tsx
+4 -1
View File
@@ -24,8 +24,10 @@ export interface LogsEntryListProps {
density?: RowDensity;
}
// Leading 16px slot reserves space for the trace-expand chevron so that
// trace rows and standalone leaf rows align under the same column edges.
const COLS_TEMPLATE =
'grid grid-cols-[88px_64px_140px_minmax(0,1fr)_72px_112px] items-center gap-3 px-3';
'grid grid-cols-[16px_88px_64px_140px_minmax(0,1fr)_72px_112px] items-center gap-3 px-3';
export function LogsEntryList({
entries,
@@ -102,6 +104,7 @@ export function LogsEntryList({
'h-9 shrink-0 border-b border-border bg-muted/30 text-[12px] font-medium uppercase tracking-wide text-muted-foreground'
)}
>
<span role="columnheader" aria-hidden="true" />
<span role="columnheader">Time</span>
<span role="columnheader">Level</span>
<span role="columnheader">Module</span>
ui/src/components/logs/logs-row.tsx
+3
View File
@@ -78,6 +78,9 @@ function LogsRowImpl({
isSelected && 'bg-muted/60 shadow-[inset_2px_0_0_var(--ring)]'
)}
>
{/* Leading 16px slot mirrors the trace-row chevron column so leaf
rows align under the same column edges as trace rows. */}
<span className="w-4 shrink-0" aria-hidden="true" />
<span
role="cell"
className={cn('w-[88px] shrink-0 truncate text-[12px] text-muted-foreground', MONO_NUMERIC)}
ui/src/components/logs/logs-trace-row.tsx
+4 -1
View File
@@ -94,7 +94,10 @@ function LogsTraceRowImpl({
FOCUS_RING
)}
>
<Chevron className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />
{/* Reserve the same 16px slot as leaf rows so all columns align. */}
<span className="flex w-4 shrink-0 items-center justify-center" aria-hidden="true">
<Chevron className="h-3.5 w-3.5 text-muted-foreground" />
</span>
<span
role="cell"
className={cn(