diff --git a/frontend/src/features/log-explorer/components/LogExplorerView.tsx b/frontend/src/features/log-explorer/components/LogExplorerView.tsx index 46d94bee3..fa237d2d5 100644 --- a/frontend/src/features/log-explorer/components/LogExplorerView.tsx +++ b/frontend/src/features/log-explorer/components/LogExplorerView.tsx @@ -67,7 +67,7 @@ const IMPORTANT_FIELDS = [ 'origin.url', 'target.url', ] -const MAX_AUTO_COLUMNS = 5 +const MAX_AUTO_COLUMNS = 10 /** Router state passed by an alert's "view all related logs" action. */ interface RelatedLogsSeed { @@ -372,8 +372,8 @@ export function LogExplorerView({ initial, onConfigChange }: LogExplorerViewProp // fields + a flex message column (default mode). Label-based floors keep // header names from cropping when a column is dragged narrow. const logGridMins = columns.length > 0 - ? [20, 3, 168, ...colMins(columns)] - : [20, 3, 168, 96, ...colMins(autoColumns), 96] + ? [20, 30, 168, ...colMins(columns)] + : [20, 30, 168, 96, ...colMins(autoColumns), 96] const { template: tableCols, startDrag } = useResizableColumns(logGridColumnSizes(columns, autoColumns), { min: logGridMins, storageKey: columnStorageKey, diff --git a/frontend/src/features/log-explorer/components/log-results.tsx b/frontend/src/features/log-explorer/components/log-results.tsx index 19aa3440f..1b6ae09df 100644 --- a/frontend/src/features/log-explorer/components/log-results.tsx +++ b/frontend/src/features/log-explorer/components/log-results.tsx @@ -47,9 +47,12 @@ function absTimestamp(iso: string) { // Grid columns. Manual mode (user picked columns): time + each picked column (last // flexes). Default mode: time + source + auto-detected important columns + a // flexible message column. +const FIELD_COL = 160 +const MESSAGE_COL = 320 + export function logGridColumnSizes(columns: string[], autoColumns: string[] = []): Array { - if (columns.length > 0) return [20, 3, 168, ...columns.map(() => 'minmax(120px, 1fr)')] - return [20, 3, 168, 120, ...autoColumns.map(() => 'minmax(96px, 0.7fr)'), 'minmax(0, 1fr)'] + if (columns.length > 0) return [20, 30, 168, ...columns.map(() => FIELD_COL)] + return [20, 30, 168, FIELD_COL, ...autoColumns.map(() => FIELD_COL), MESSAGE_COL] } function gridTemplate(columns: string[], autoColumns: string[] = []): string { diff --git a/frontend/src/shared/hooks/useResizableColumns.ts b/frontend/src/shared/hooks/useResizableColumns.ts index 4e22f7b56..e1c66af3d 100644 --- a/frontend/src/shared/hooks/useResizableColumns.ts +++ b/frontend/src/shared/hooks/useResizableColumns.ts @@ -37,6 +37,8 @@ export function useResizableColumns(initial: ColSize[], opts: Opts = {}) { const [widths, setWidths] = useState(initial) const dragRef = useRef<{ index: number; startX: number; startW: number; measured: number[] } | null>(null) + const effectiveWidths = widths.length === initial.length ? widths : initial + useEffect(() => { setWidths(initial) }, [initial.length, storageKey]) @@ -88,17 +90,17 @@ export function useResizableColumns(initial: ColSize[], opts: Opts = {}) { [min], ) - const mins = widths.map((_, i) => minAt(min, i)) + const mins = effectiveWidths.map((_, i) => minAt(min, i)) // ponytail: wrap simple fr tracks in minmax so a narrow viewport can't // collapse labels below their per-column min. Fixed px tracks and strings // that already declare their own function (e.g. `minmax(120px, 1fr)`) are // passed through unchanged. - const template = widths + const template = effectiveWidths .map((w, i) => { if (typeof w === 'number') return `${w}px` return /^[\d.]+fr$/.test(w.trim()) ? `minmax(${mins[i]}px, ${w})` : w }) .join(' ') - return { widths, template, setWidths, startDrag, mins } + return { widths: effectiveWidths, template, setWidths, startDrag, mins } }