mirror of
https://github.com/tiennm99/ccs.git
synced 2026-07-16 04:18:05 +00:00
fix(ui): drop dedicated stage column; render stage chip inline in message
Adding a separate STAGE column squeezed MESSAGE to 0px at the default 22/52/26 panel split — fixed columns + gaps totalled more than the list panel's available width. Render the stage chip inline at the start of the MESSAGE column when present, restoring the original 7-column grid. The bot's earlier "extra cell mismatch" complaint is still satisfied because there's no longer a row-only cell missing from the header. Also tighten three fixed columns to give MESSAGE more breathing room even on narrower saved panel layouts: - Module 140 -> 120 - Latency 72 -> 64 - Request 112 -> 100
This commit is contained in:
@@ -25,12 +25,12 @@ export interface LogsEntryListProps {
|
||||
}
|
||||
|
||||
// Column layout shared by the header and every row variant:
|
||||
// chevron(16) · time(88) · level(64) · stage(72) · module(140) · message(flex) · latency(72) · request(112)
|
||||
// The dedicated `stage` column is rendered as an empty span on rows that
|
||||
// have no stage hint so column edges align across leaf, trace head, and
|
||||
// trace child rows alike.
|
||||
// chevron(16) · time(88) · level(64) · module(120) · message(flex) · latency(64) · request(100)
|
||||
// Stage chips render inline at the start of the MESSAGE column rather
|
||||
// than as a dedicated column. Fixed columns kept lean so MESSAGE has
|
||||
// breathing room at common saved-layout list-panel widths (~600px).
|
||||
const COLS_TEMPLATE =
|
||||
'grid grid-cols-[16px_88px_64px_72px_140px_minmax(0,1fr)_72px_112px] items-center gap-3 px-3';
|
||||
'grid grid-cols-[16px_88px_64px_120px_minmax(0,1fr)_64px_100px] items-center gap-3 px-3';
|
||||
|
||||
export function LogsEntryList({
|
||||
entries,
|
||||
@@ -152,7 +152,6 @@ export function LogsEntryList({
|
||||
<span role="columnheader" aria-hidden="true" />
|
||||
<span role="columnheader">Time</span>
|
||||
<span role="columnheader">Level</span>
|
||||
<span role="columnheader">Stage</span>
|
||||
<span role="columnheader">Module</span>
|
||||
<span role="columnheader">Message</span>
|
||||
<span role="columnheader" className="text-right">
|
||||
|
||||
@@ -110,31 +110,29 @@ function LogsRowImpl({
|
||||
<span role="cell" className="flex w-[64px] shrink-0 items-center">
|
||||
<LogLevelBadge level={entry.level} />
|
||||
</span>
|
||||
{/* Always reserve the stage column so leaf, trace head, and trace
|
||||
child rows all align under the same column edges in the header
|
||||
grid template. Children with `stageHint` show a chip; rows
|
||||
without one render an empty span at the same width. */}
|
||||
{stageHint ? (
|
||||
<span
|
||||
role="cell"
|
||||
className="w-[72px] shrink-0 truncate rounded border border-border bg-muted/30 px-1.5 py-0.5 text-[11px] uppercase tracking-wide text-muted-foreground"
|
||||
>
|
||||
{stageHint}
|
||||
</span>
|
||||
) : (
|
||||
<span role="cell" className="w-[72px] shrink-0" aria-hidden="true" />
|
||||
)}
|
||||
<span
|
||||
role="cell"
|
||||
className="w-[140px] shrink-0 truncate text-[12px] font-medium text-foreground/80"
|
||||
className="w-[120px] shrink-0 truncate text-[12px] font-medium text-foreground/80"
|
||||
>
|
||||
{moduleLabel}
|
||||
</span>
|
||||
<span role="cell" className="min-w-0 flex-1 truncate text-[13px] text-foreground/90">
|
||||
{entry.message}
|
||||
<span
|
||||
role="cell"
|
||||
className="flex min-w-0 flex-1 items-center gap-2 truncate text-[13px] text-foreground/90"
|
||||
>
|
||||
{/* Stage chip renders inline at the start of the message column
|
||||
when a hint is available. Keeps the 7-column grid intact —
|
||||
adding a dedicated stage column squeezed message to 0px at
|
||||
common list-panel widths. */}
|
||||
{stageHint ? (
|
||||
<span className="inline-flex shrink-0 items-center rounded border border-border bg-muted/30 px-1.5 py-0.5 text-[11px] uppercase tracking-wide text-muted-foreground">
|
||||
{stageHint}
|
||||
</span>
|
||||
) : null}
|
||||
<span className="min-w-0 truncate">{entry.message}</span>
|
||||
{repeatCount && repeatCount > 1 ? (
|
||||
<span
|
||||
className="ml-2 inline-flex items-center rounded bg-muted px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground"
|
||||
className="ml-1 inline-flex shrink-0 items-center rounded bg-muted px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground"
|
||||
title={`${repeatCount} consecutive identical entries`}
|
||||
>
|
||||
×{repeatCount}
|
||||
@@ -144,7 +142,7 @@ function LogsRowImpl({
|
||||
<span
|
||||
role="cell"
|
||||
className={cn(
|
||||
'hidden w-[72px] shrink-0 truncate text-right text-[12px] text-muted-foreground sm:inline-block',
|
||||
'hidden w-[64px] shrink-0 truncate text-right text-[12px] text-muted-foreground sm:inline-block',
|
||||
MONO_NUMERIC
|
||||
)}
|
||||
>
|
||||
@@ -153,7 +151,7 @@ function LogsRowImpl({
|
||||
<span
|
||||
role="cell"
|
||||
className={cn(
|
||||
'hidden w-[112px] shrink-0 items-center justify-end gap-1 text-right text-[12px] text-muted-foreground/80 lg:inline-flex',
|
||||
'hidden w-[100px] shrink-0 items-center justify-end gap-1 text-right text-[12px] text-muted-foreground/80 lg:inline-flex',
|
||||
MONO_NUMERIC
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -79,11 +79,9 @@ function LogsTraceRowImpl({
|
||||
<span role="cell" className="flex w-[64px] shrink-0 items-center">
|
||||
<LogLevelBadge level={group.maxLevel} />
|
||||
</span>
|
||||
{/* Empty stage column for grid alignment with header + leaf rows. */}
|
||||
<span role="cell" className="w-[72px] shrink-0" aria-hidden="true" />
|
||||
<span
|
||||
role="cell"
|
||||
className="flex w-[140px] shrink-0 items-center gap-1.5 truncate text-[12px] font-medium text-foreground/80"
|
||||
className="flex w-[120px] shrink-0 items-center gap-1.5 truncate text-[12px] font-medium text-foreground/80"
|
||||
>
|
||||
<GitBranch className="h-3 w-3 text-muted-foreground" aria-hidden="true" />
|
||||
{group.module}
|
||||
@@ -94,7 +92,7 @@ function LogsTraceRowImpl({
|
||||
<span
|
||||
role="cell"
|
||||
className={cn(
|
||||
'hidden w-[72px] shrink-0 truncate text-right text-[12px] text-muted-foreground sm:inline-block',
|
||||
'hidden w-[64px] shrink-0 truncate text-right text-[12px] text-muted-foreground sm:inline-block',
|
||||
MONO_NUMERIC
|
||||
)}
|
||||
>
|
||||
@@ -103,7 +101,7 @@ function LogsTraceRowImpl({
|
||||
<span
|
||||
role="cell"
|
||||
className={cn(
|
||||
'hidden w-[112px] shrink-0 truncate text-right text-[12px] text-muted-foreground lg:inline-block',
|
||||
'hidden w-[100px] shrink-0 truncate text-right text-[12px] text-muted-foreground lg:inline-block',
|
||||
MONO_NUMERIC
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user