From e5df232b44cf0a66d8c10692323ac8934f47e3f3 Mon Sep 17 00:00:00 2001 From: Danny White <3104761+dnywh@users.noreply.github.com> Date: Sat, 11 Jul 2026 03:13:41 +1000 Subject: [PATCH] fix(studio): polish unified logs row alignment and success colours (#47829) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## What kind of change does this PR introduce? UI polish ## What is the current behavior? Unified logs row chrome is slightly misaligned (checkbox vs filter toggle, uneven gaps around the level dot), success grey is too dark and doesn’t match the Level key, and log-type icons read a bit heavy. ## What is the new behavior? - Aligns the row checkbox with the filter sidebar toggle and spaces the level dot evenly between checkbox and timestamp - Drops the checkbox `translate-y` nudge in favour of normal middle alignment - Introduces `--chart-success` so the chart and Level key/dots share a lighter grey - Softens log-type icon colour on each row | Before | After | | --- | --- | | 1293 | 52159 | ## Summary by CodeRabbit * **Style** * Improved Unified Logs table spacing and alignment, including narrower selection and level columns. * Refined checkbox and date-cell presentation for a cleaner layout. * Updated log type icons to use muted foreground styling. * **Bug Fixes** * Success statuses and chart indicators now consistently use the dedicated success color across light and dark themes. --- .../interfaces/UnifiedLogs/UnifiedLogs.tsx | 2 +- .../UnifiedLogs/components/Columns.tsx | 39 +++++++++---------- .../ui/DataTable/DataTable.utils.ts | 5 ++- .../ui/DataTable/DataTableInfinite.tsx | 3 +- apps/studio/styles/globals.css | 2 + 5 files changed, 26 insertions(+), 25 deletions(-) diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx index 9a034beb7a0..6453c9b780d 100644 --- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx +++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx @@ -74,7 +74,7 @@ import { useShortcut } from '@/state/shortcuts/useShortcut' export const CHART_CONFIG = { success: { label: , - color: 'var(--foreground-muted)', + color: 'var(--chart-success)', }, warning: { label: , diff --git a/apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx index 4f43c6c660e..16e6b86e234 100644 --- a/apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx +++ b/apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx @@ -44,25 +44,24 @@ export function generateDynamicColumns({ data }: { data: ColumnSchema[] }): { header: '', cell: ({ row }) => { return ( -
- row.toggleSelected(!!value)} - onClick={(e) => e.stopPropagation()} - /> -
+ row.toggleSelected(!!value)} + onClick={(e) => e.stopPropagation()} + /> ) }, enableHiding: false, enableResizing: false, enableSorting: false, filterFn: () => true, - size: 48, - minSize: 48, - maxSize: 48, + size: 42, + minSize: 42, + maxSize: 42, meta: { - cellClassName: 'w-[32px]', - headerClassName: 'w-[32px]', + // pl-3.5 → toggle-filter icon; pr-3 matches date pl-3 (equal gaps around the dot) + cellClassName: 'w-[42px] min-w-[42px] pl-3.5 pr-3', + headerClassName: 'w-[42px] min-w-[42px] pl-3.5 pr-3', }, }, // Level column - always visible @@ -77,12 +76,12 @@ export function generateDynamicColumns({ data }: { data: ColumnSchema[] }): { enableResizing: false, enableSorting: false, filterFn: () => true, - size: 48, - minSize: 48, - maxSize: 48, + size: 8, + minSize: 8, + maxSize: 8, meta: { - cellClassName: 'w-[32px]', - headerClassName: 'w-[32px]', + cellClassName: 'w-2 min-w-2 px-0', + headerClassName: 'w-2 min-w-2 px-0', }, }, // Date column - always visible @@ -100,8 +99,8 @@ export function generateDynamicColumns({ data }: { data: ColumnSchema[] }): { minSize: 140, maxSize: 140, meta: { - cellClassName: 'font-mono tracking-tight w-[140px]', - headerClassName: 'w-[140px]', + cellClassName: 'font-mono tracking-tight w-[140px] pl-3', + headerClassName: 'w-[140px] pl-3', dataType: 'date', }, }, @@ -113,7 +112,7 @@ export function generateDynamicColumns({ data }: { data: ColumnSchema[] }): { const logType = row.getValue('log_type') return (
- +
) }, diff --git a/apps/studio/components/ui/DataTable/DataTable.utils.ts b/apps/studio/components/ui/DataTable/DataTable.utils.ts index d206a302dd8..54366ba78c7 100644 --- a/apps/studio/components/ui/DataTable/DataTable.utils.ts +++ b/apps/studio/components/ui/DataTable/DataTable.utils.ts @@ -63,8 +63,9 @@ export function getLevelColor( case 'success': return { text: 'text-muted', - bg: 'bg-muted group-data-[state=selected]/row:bg-foreground-lighter', - border: 'border-muted group-data-[state=selected]/row:border-foreground-lighter', + bg: 'bg-[var(--chart-success)] group-data-[state=selected]/row:bg-foreground-lighter', + border: + 'border-[var(--chart-success)] group-data-[state=selected]/row:border-foreground-lighter', } case 'warning': return { diff --git a/apps/studio/components/ui/DataTable/DataTableInfinite.tsx b/apps/studio/components/ui/DataTable/DataTableInfinite.tsx index a29ac3b1c6c..43dddc72634 100644 --- a/apps/studio/components/ui/DataTable/DataTableInfinite.tsx +++ b/apps/studio/components/ui/DataTable/DataTableInfinite.tsx @@ -14,7 +14,7 @@ import { SHORTCUT_IDS } from '@/state/shortcuts/registry' import { useShortcut } from '@/state/shortcuts/useShortcut' const TableRowClassName = 'border-b group data-[state=selected]:bg-muted hover:bg-surface-200' -const TableCellClassName = 'text-xs py-1! p-2 *:[[role=checkbox]]:translate-y-[2px] truncate' +const TableCellClassName = 'text-xs py-1! p-2 truncate' // TODO: add a possible chartGroupBy export interface DataTableInfiniteProps { @@ -105,7 +105,6 @@ export function DataTableInfinite({ 'w-full text-xs! font-normal! text-foreground-lighter font-mono', 'relative select-none truncate [&>.cursor-col-resize]:last:opacity-0', 'text-muted-foreground h-9 px-2 text-left align-middle', - '[&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]', headerClassName )} aria-sort={sort === 'asc' ? 'ascending' : sort === 'desc' ? 'descending' : 'none'} diff --git a/apps/studio/styles/globals.css b/apps/studio/styles/globals.css index 3b9726e0460..11a94f0d7b0 100644 --- a/apps/studio/styles/globals.css +++ b/apps/studio/styles/globals.css @@ -147,6 +147,7 @@ --chart-warning: hsl(var(--warning-500)); --chart-warning-muted: hsl(var(--warning-400)); --chart-destructive: hsl(var(--destructive-default)); + --chart-success: color-mix(in oklch, var(--foreground-muted) 65%, white); --sidebar-background: var(--background-dash-sidebar); --sidebar-foreground: var(--foreground-default); --sidebar-primary: var(--foreground-default); @@ -169,6 +170,7 @@ --chart-warning: hsl(var(--warning-default)); --chart-warning-muted: hsl(var(--warning-500)); --chart-destructive: hsl(var(--destructive-default)); + --chart-success: color-mix(in oklch, var(--foreground-muted) 65%, white); --sidebar-background: var(--background-dash-sidebar); --sidebar-foreground: var(--foreground-default); --sidebar-primary: var(--foreground-default);