[david-crespo]

These came out of a scan I did of the console with Chrome's Modern Web Guidance skill, which gives an agent a set of guides on current web platform features to check a codebase against. Each change is its own commit.

• Set color-scheme from the chosen theme. Our <meta name="color-scheme" content="dark light"> tag tells the browser to pick a scheme from the OS preference, and the theme toggle only set data-theme on <html>. So browser-drawn UI (native scrollbars, date pickers, autofill) followed the OS and not the chosen theme. With a light OS and the default dark theme, the side modal's scrollbar was drawn for a light page: a white track with classic scrollbars, or a dark thumb on the dark background with macOS overlay scrollbars. Now data-theme also sets the color-scheme CSS property.
• Add autoComplete="current-password" to the login form's password field. Password managers use it to tell a login form from a signup form. The username field already had autoComplete="username".
• Drive table scroll shadows with a CSS scroll timeline. The shadows on the sticky first column and the actions column were toggled by a useIsOverflow hook that listened to scroll and resize events, throttled with lodash.throttle. They are now an animation tied to the table's horizontal scroll position with animation-timeline: scroll(nearest inline), so the hook and lodash.throttle are gone. The shadow fades in over the first 2rem of scroll instead of snapping on. Scroll timelines need Chrome 115 (July 2023), Safari 26 (September 2025) or Firefox 159 (October 2026), which is only two weeks old. The rules are inside @supports, so older Firefox and Safari lose the shadows and nothing else. I think that is fine: the scrollbar is still always visible. The shadows were also very hard to see, especially in the dark theme, so I made them stronger.
• Use a theme color for the table scrollbar thumb. The SimpleBar thumb was hard-coded white at 28% opacity, which is nearly invisible in the light theme. It is now --content-quaternary, and --content-tertiary on hover.
• Drop the uuid package. This one is not from the scan. The mock API now uses crypto.randomUUID(), which needs a secure context (HTTPS or localhost), as MSW's service worker already does. Toast IDs were the only use in the app itself, and I replaced those with a simple counter because the console is occasionally served over plain HTTP, e.g., from Nexus on a remote dev machine. uuid.validate in the mock API is replaced by a regex that matches any UUID version, as Nexus does.

I also tried replacing SimpleBar with native scrollbar-color and scrollbar-width, which one of the guides recommends, and dropped it. SimpleBar was added in #1310 to keep the table's horizontal scrollbar visible so it's clear the table overflows. Firefox on macOS can't do that natively: overlay scrollbars hide until you scroll.

I checked the shadows and the scrollbar thumb in Chromium in both themes, and that Firefox 151, which has no scroll timelines, shows no shadows.

color-scheme: light OS, dark theme

Before, the overlay scrollbar thumb on the right is dark on a dark background.

Scroll shadows

Table scrollbar thumb in light theme

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
console	Ready	Preview	Nov 11, 2026 6:25pm UTC

[david-crespo]

@benjaminleonard you might want to tone down the light mode one. See the screenshot in the PR description. It may have been fine before. The dark mode one was invisible though.