fix(sql): polish results grid styling (UX-1330) (#2530)

Address visual issues in the SQL Studio results grid:

- Render boolean cells in the default foreground color instead of
  green/orange (text-success/text-warning).
- Render JSON/composite cell triggers in the default foreground color,
  keeping the dotted underline as the expand affordance (drop text-info).
- Keep the frozen row-number gutter opaque. rdg's row-hover tint
  (--color-accent-subtle) is semi-transparent, so first-column text
  scrolled under the frozen column was bleeding through the hovered
  row's gutter and overlapping the row number.
- Add thin, transparent-track scrollbars to the grid so native Linux
  scrollbars no longer render as opaque black.

Author: c-julin

frontend/src/components/pages/sql/sql-results.css

@@ -24,3 +24,41 @@
 .sql-results-grid .sql-results-row-alt {
   --rdg-background-color: var(--color-background-subtle);
 }
+
+/* Frozen row-number gutter must stay opaque. rdg's row-hover tint
+   (--color-accent-subtle) is semi-transparent, so without this the first data
+   column's text — scrolled horizontally underneath the frozen column — bleeds
+   through the hovered row's gutter and overlaps the row number. Paint the
+   gutter with the row's opaque base (card, or zebra-subtle on alt rows). */
+.sql-results-grid .sql-results-rownum {
+  background-color: var(--rdg-background-color);
+}
+
+/* Cross-platform scrollbars. Native Linux scrollbars render opaque/black
+   over the grid; make them thin with a transparent track and a subtle thumb
+   so they blend in instead. rdg scrolls on its own root element. */
+.rdg.sql-results-grid {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) transparent;
+}
+
+.rdg.sql-results-grid::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.rdg.sql-results-grid::-webkit-scrollbar-track,
+.rdg.sql-results-grid::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.rdg.sql-results-grid::-webkit-scrollbar-thumb {
+  background-color: var(--color-border);
+  background-clip: content-box;
+  border: 2px solid transparent;
+  border-radius: 8px;
+}
+
+.rdg.sql-results-grid::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-muted-foreground);
+}

frontend/src/components/pages/sql/sql-results.tsx

@@ -148,7 +148,7 @@ function JsonCellPopover({ value, name, typeLabel }: { value: string; name: stri
       <PopoverTrigger asChild>
         <button
           className={cn(
-            'block cursor-pointer truncate text-left font-mono text-info underline decoration-dotted underline-offset-2',
+            'block cursor-pointer truncate text-left font-mono underline decoration-dotted underline-offset-2',
             CELL_MAX_W
           )}
           title="Show JSON"
@@ -201,7 +201,7 @@ function CellContent({
 }) {
   const container = useContext(CellPopoverContainerContext);
   if (kind === 'bool' && typeof v === 'boolean') {
-    return <span className={cn('font-semibold', v ? 'text-success' : 'text-warning')}>{String(v)}</span>;
+    return <span className="font-semibold">{String(v)}</span>;
   }
   if (v === null || v === undefined) {
     return <span className="text-disabled italic">NULL</span>;
@@ -289,7 +289,7 @@ function buildColumns(cols: ColumnDef[]): Column<ResultRow>[] {
     width: 'max-content',
     renderHeaderCell: () => <span className="font-mono text-disabled text-xs">#</span>,
     renderCell: ({ rowIdx }) => rowIdx + 1,
-    cellClass: 'text-right font-mono text-disabled text-xs [user-select:none]',
+    cellClass: 'sql-results-rownum text-right font-mono text-disabled text-xs [user-select:none]',
   };
   const dataCols = cols.map((c): Column<ResultRow> => {
     const alignRight = c.kind === 'num';