The sidebar regression is the real fix here. NavItem paints the selected
item with action.selected but hovers unselected items with MUI's default
action.hover. Once the sidebar moved onto `paper`, selected composited to
rgb(31,38,41) - darker than the ground - while hover came out lighter at
rgb(46,46,51), so hovering any other item made it read as more selected
than the actual selection. Both states now come from the same family
(selectedHover / rowHover), so selected always reads stronger.
Also from review:
- Dropped "Inter" from the status page SANS_STACK. Its webfont went with
the Google Fonts import, so on Windows and Linux the stack was silently
falling through to Segoe UI / Roboto on pages users publish.
- Button focus rings now use the same dark-mode green as input focus
rings. They were still on primary.main at 2.86:1, which is the exact
problem primary.light was added to solve.
- Removed 13 size={16} props made redundant by the Icon default change.
The load-bearing pins stay: size={20} on the public status page, and
the header pins that were relying on the old default.
- Documented that alpha() replaces rather than multiplies the alpha
channel in StatusBox, so the grid is coupled to `divider` being opaque.
- Noted on the isRowSelected JSDoc that the small-screen card branch does
not style selection, same limitation getRowSx already had.
Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd
Third time this bug has surfaced, so this fixes the cause. Icon defaulted
to 20px, but 17 call sites already asked for 16 explicitly against 2 for
20, and the sidebar clamps to 16 in CSS - so 16 was the house size and
the 20 default was one nobody chose. Anything bare rendered above the cap
height of the 13px text beside it.
The default is now 16. Five sites that were relying on the old default
and sit next to labels are pinned explicitly anyway (team header, status
page controls, status page delete, theme toggle), and the public status
page's warning icon is pinned at 20 so the default change does not alter
a page users publish.
Sidebar icons are unaffected either way - their CSS already forced 16.
Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd
The offline banner used error.main, which in dark mode is light enough
that MUI derives near-black contrastText - a pale salmon bar with dark
text on the one surface where urgency is the point. It now uses
error.dark with explicit white text: 11.12:1 in light mode, 5.04:1 in
dark, and a solid red bar in both.
Darkening error.main itself was the other option, but roughly 30 places
use it as text or a chart mark on a dark ground, where the lighter value
is correct - it would have cost all of them to fix one banner.
The incident summary icons rendered at the shared Icon default of 20px
in lucide's currentColor, so they sat larger and darker than the 13px
label beside them. Now 16px, matching the sidebar and the uptime header
buttons, and coloured from SummaryItem so the icon is a supporting mark
rather than competing with its own label. The 32px status icon on the
active-incidents card keeps its size and semantic colour; it is a focal
indicator, not a label decoration.
Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd
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
Browser testing showed the alert stretching the full width of the save
bar while Save was pushed against the right edge, and the two sat on
different vertical centres.
The alert carried flexGrow: 1, so it consumed all the free space in the
row, plus mb: 2 and mr: 2, which offset it against a button that had
neither. The row itself set no alignItems, so the items aligned by
stretch rather than centre.
The row now centres its items and uses gap for spacing, and the alert
drops its sx entirely: growing was what stretched it, and the margins
are the gap's job. Measured: the alert sizes to its content (297px, was
1168px), 16px from Save, centres within 2px.
Removing the sx also clears two of the four pre-existing lint warnings
on this file.
Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd
Second review pass on the tab grouping.
The save bar listed raw schema keys, and react-hook-form nests errors by
path, so a threshold error arrived as { globalThresholds: { cpu: {...} } }.
Iterating only the top level produced an entry whose own message was
undefined, rendering "globalThresholds: Invalid value" -- naming none of
the four sliders and carrying no reason. Errors are now flattened to
their leaves, so the row names the field that actually failed.
Rows also showed untranslated identifiers such as
systemEmailRejectUnauthorized. Every field already owns a translated
label, so those are reused via FIELD_LABEL_KEY; no new strings. Labels
that append an explanation after a dash are trimmed to the name.
Both defects predate this branch, but the tab work promoted these rows
into clickable links, which made unusable names more prominent.
Also guards visibleTabs[0], which is safe only because "general" is
currently ungated: gating it later, or adding a second role, would throw
on an empty list and blank the page. And a "tab" parameter that does not
resolve -- an unknown key, or an admin tab followed by a non-admin -- is
now dropped, so the URL stops claiming a tab the page is not showing.
Valid deep links are untouched.
Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd
Code review caught that the tab panels never hid.
Each panel was a `<Stack hidden={activeTab !== key}>`. The `hidden`
attribute reaches the DOM, but the only rule acting on it is the user
agent's `[hidden] { display: none }`, and MUI's Stack sets
`display: flex` in an author-level emotion class
(@mui/system/Stack/createStack.js:70). Author origin beats user agent
regardless of specificity, so every panel stayed visible: all five tabs
rendered stacked down the page and clicking a tab changed nothing.
Panels are now conditionally rendered, matching Pages/Account. This also
fixes a second defect: BasePage wraps children in `Stack spacing`, whose
sibling selector keys on DOM position rather than visibility, so the four
empty panels a non-admin never sees still collected a margin-top each and
left four blank gaps below "About".
My commit message for the previous commit argued panels had to stay
mounted or a partial tree would compute a stale `isValid` and lock
saving. That was wrong. No Form*Field passes `shouldUnregister`, and
react-hook-form defaults it to false, so unmounting a panel preserves its
values and validation state.
Also moves the tab-reveal off `onError`, which was unreachable: the save
button is `disabled={!isValid}` under `mode: "onChange"`, so
handleSubmit's error branch never fires. The validation Alert renders
straight from `formState.errors`, so a field on a hidden tab could be
named with no way to reach it. Each field in the Alert is now a button
that switches to its own tab.
Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd
The settings page rendered all 13 ConfigBox sections in one column, so
finding anything meant scrolling past everything else.
The sections are now grouped under five tabs by subject:
General timezone, appearance, status page URL, about
Monitoring thresholds, check retention, demo monitors
Email email settings
Integrations global proxy, PageSpeed API key
Data import/export, monitor history, system reset
No section changed. Every ConfigBox moved verbatim with its props,
children and isAdmin guard intact; the only edit inside one is Prettier
rewrapping an arrow function that shifted indentation level.
Tabs are derived from a filtered array rather than conditional JSX, so
indices stay correct when admin-only tabs drop out. Nine of the thirteen
sections are admin-gated, which leaves a non-admin four sections in
General alone -- the bar is hidden entirely in that case rather than
showing four empty tabs.
Panels stay mounted and toggle with `hidden`. Conditionally rendering
them would unmount inputs belonging to the shared react-hook-form, and
since Save is disabled on !isValid, a partial tree can compute a stale
isValid and lock saving.
The active tab lives in the URL as ?tab=<key> so reloads and shared
links land in the right place, following the useSearchParams pattern in
StatusPage/Status. An unknown tab, or an admin tab requested by a
non-admin, falls back to the first visible tab.
Both confirmation dialogs and the sticky save bar stay outside the
panels: the dialogs would unmount mid-request otherwise, and the save
bar serves the whole form.
Because the save bar lists validation errors by field name, an error
could name a field on a hidden tab. onError now switches to the tab
owning the first error before the alert renders.
Two titles are corrected to sentence case while their sections move:
"Global Thresholds" and "Monitor IP/URL on Status Page".
Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd
The network tab warns when Capture can only see a container's own
network namespace, but the condition required EVERY reported interface
to be named lo, lo0 or docker0. A containerised Capture usually also
reports the container's veth under a host-looking name (eth0, ens3,
...), so the common case failed that test and the notice never
appeared - leaving those users with plausible-but-meaningless traffic
and nothing explaining why.
Widening it to "any container-only name present" would have been wrong
in the other direction: a host-level Capture on a machine running
Docker legitimately reports docker0 alongside its real NIC, and would
then have been warned incorrectly.
Interface names alone cannot separate the two cases. What does is that
in the container case nothing carries real traffic, while a genuine
host has a busy NIC. The notice now fires when a container-only
interface is present AND every interface is idle, using a 1 KB/s
threshold - real NICs sit orders of magnitude above it, a container's
veth sits at or near zero.
Checked against six scenarios: the reported case (lo + ens3 + docker0,
all near zero) now warns; a host with a busy NIC plus an idle docker0
does not; a fully namespaced container still warns as before; and a
quiet host with no container-only names stays silent.
The notice text is updated to match, since it previously described
only the all-container-names case and did not explain that a
host-looking interface can be the container's own.
Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd
Two small pre-existing bugs in the infrastructure gauges.
Arc overdraw. Gauge computed strokeLength from the raw `progress` prop
while the label and the fill colour both used `progressWithinRange`,
the value clamped to 0-100. A reading above 100% therefore swept the
arc past a full circle - the offset (circumference - strokeLength)
went negative - while the label still read "100.0%". A negative
reading drew the arc backwards for the same reason. strokeLength now
uses the clamped value, so out-of-range input stops at exactly one
turn and matches what the label and colour already showed. Values in
range are unaffected.
The effect that animates the arc also listed `progress` in its
dependency array while only reading `strokeLength`, so it re-ran the
100ms animation on changes that could not alter the arc (105% to 110%,
say). Now that strokeLength is derived from the clamped value, the
stale dependency is dropped.
Disk key fallback. `disk?.device || 0 + idx` parses as
`disk?.device || (0 + idx)` because + binds tighter than ||, so the
fallback was just `idx` and the leading 0 did nothing. It happened to
produce unique keys, but by accident rather than intent, and a disk
whose device is the empty string collided with index 0. Replaced with
a `disk-${idx}` template so the intent is explicit.
Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd
The gauge row on the infrastructure details page laid out memory, CPU
and one gauge per disk in a single flex row with no wrapping and no
overflow handling. Each gauge is capped at 260px, so on a host with
enough disks the row ran past the content column.
RootLayout sets overflow: "hidden" on that column, so the excess was
clipped outright rather than becoming scrollable - the later disks
rendered but could not be reached by any means.
Three changes, all scoped to this row:
flexWrap moves the overflow onto additional rows.
useFlexGap is required alongside it. MUI's Stack implements `spacing`
as `& > :not(style) ~ :not(style) { marginLeft }`, and that selector is
DOM-order based rather than line-aware, so the first card of each
wrapped row would carry a spurious 16px left margin and misalign
against the row above. useFlexGap switches to a real flex gap.
flexBasis on the children is what actually makes the line break.
BaseChart sets `flex: 1`, which expands to `flex: 1 1 0%`; wrapping is
decided by the sum of items' hypothetical main sizes, so with a zero
basis that sum is 0 and the row never overflows. The cards would
instead shrink to min-content (roughly the 70px gauge plus the widest
label) and stay on one cramped line. Giving each child a 260px basis
makes the row wrap at the intended card width.
The basis is applied through the row's own `& > *` selector rather than
by changing BaseChart, which has eight other consumers that default to
maxWidth: "100%" and would have had their layout altered.
The repeated 260 literals are now a named constant.
Only affects viewports at or above the md breakpoint; below it the
stack is already a column, where flexWrap is inert.
Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd
fabiangigler
Alex Holliday
Malena Aguiar
gorkem-bwl
signalgridco
eralpozcan