mirror of
https://github.com/tiennm99/ccs.git
synced 2026-09-02 18:18:43 +00:00
fix(ui): reserve leading chevron column so trace and leaf rows align
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:
@@ -24,8 +24,10 @@ export interface LogsEntryListProps {
|
|||||||
density?: RowDensity;
|
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 =
|
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({
|
export function LogsEntryList({
|
||||||
entries,
|
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'
|
'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">Time</span>
|
||||||
<span role="columnheader">Level</span>
|
<span role="columnheader">Level</span>
|
||||||
<span role="columnheader">Module</span>
|
<span role="columnheader">Module</span>
|
||||||
|
|||||||
@@ -78,6 +78,9 @@ function LogsRowImpl({
|
|||||||
isSelected && 'bg-muted/60 shadow-[inset_2px_0_0_var(--ring)]'
|
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
|
<span
|
||||||
role="cell"
|
role="cell"
|
||||||
className={cn('w-[88px] shrink-0 truncate text-[12px] text-muted-foreground', MONO_NUMERIC)}
|
className={cn('w-[88px] shrink-0 truncate text-[12px] text-muted-foreground', MONO_NUMERIC)}
|
||||||
|
|||||||
@@ -94,7 +94,10 @@ function LogsTraceRowImpl({
|
|||||||
FOCUS_RING
|
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
|
<span
|
||||||
role="cell"
|
role="cell"
|
||||||
className={cn(
|
className={cn(
|
||||||
|
|||||||
Reference in New Issue
Block a user