fix(studio): polish unified logs row alignment and success colours (#47829)

## 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 |
| --- | --- |
| <img width="1024" height="759" alt="1293"
src="https://github.com/user-attachments/assets/af7ab83f-8917-41cb-99f3-1c1f92df769e"
/> | <img width="1024" height="759" alt="52159"
src="https://github.com/user-attachments/assets/9b859308-2101-4a02-bdc1-75e5750f84fa"
/> |


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## 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.


<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx

@@ -74,7 +74,7 @@ import { useShortcut } from '@/state/shortcuts/useShortcut'
 export const CHART_CONFIG = {
   success: {
     label: <TooltipLabel level="success" />,
-    color: 'var(--foreground-muted)',
+    color: 'var(--chart-success)',
   },
   warning: {
     label: <TooltipLabel level="warning" />,

apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx

@@ -44,25 +44,24 @@ export function generateDynamicColumns({ data }: { data: ColumnSchema[] }): {
       header: '',
       cell: ({ row }) => {
         return (
-          <div className="flex items-center justify-center">
-            <Checkbox
-              checked={row.getIsSelected()}
-              onCheckedChange={(value) => row.toggleSelected(!!value)}
-              onClick={(e) => e.stopPropagation()}
-            />
-          </div>
+          <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => 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<ColumnSchema['log_type']>('log_type')
         return (
           <div className="flex items-center justify-end gap-1">
-            <LogTypeIcon type={logType} size={16} className="text-foreground/70" />
+            <LogTypeIcon type={logType} size={16} className="text-foreground-muted" />
           </div>
         )
       },

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 {

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<TData, TValue, _TMeta> {
@@ -105,7 +105,6 @@ export function DataTableInfinite<TData, TValue, TMeta>({
                     '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'}

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);