Files
Checkmate/client/src/index.css
T
gorkem-bwl f931954997 fix(client): make row selection visible, and clear review findings
Selection never showed. getRowSx set a background on the <tr>, but every
<td> paints background.paper over it, and the hover rule targets cells -
so hover won and selection was invisible. Selection and hover are now
both cell-level rules in DataTable, with selection first so hover layers
on top, and rows carry an `is-selected` class from a new isRowSelected
prop. Uptime, Docker and Infrastructure tables all had the same broken
copy of this; they now share the one implementation, and any future table
gets it for free.

action.selected/selectedHover are defined explicitly and tinted with the
brand, so a selected row reads as chosen rather than dirty. Kept low
(6-11%) so the highlight does not swamp the row, especially in dark mode.

From code review:

- Dropped the Google Fonts @import at the top of index.css. Nothing has
  used Inter since the switch to Geist, and it was a render-blocking
  third-party request on every load - exactly what self-hosting the font
  was meant to avoid on air-gapped installs.
- TextInput's autofill override painted background.default, which used
  to equal paper and no longer does, so Chrome-autofilled fields showed
  a grey block on white cards. Now paper.
- Sidebar background moved from sx to the bgcolor prop (convention rule
  1, and it was a new lint warning), and the backdropFilter dropped -
  the background is opaque, so the blur only cost a compositing layer.
- Tab no longer bolds the selected label. That is the same reflow the
  ToggleButton change removed, and worse here because the indicator
  animates toward a target that moves as the label widens.
- Corrected the StatBox gradient comment: contrastText is white in light
  mode but near-black in dark, so the constraint is staying near `main`,
  not staying dark.

Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd
2026-09-03 01:14:49 -04:00

20 lines
257 B
CSS

* {
box-sizing: border-box;
}
html,
body {
overscroll-behavior: none;
}
html {
scroll-behavior: smooth;
}
:root {
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}