Liquid-glass login redesign + auto dark mode - #101
Merged
Conversation
Autofocus the user_code field when no code is prefilled (the 'Device Code' placeholder is shown), otherwise focus the username field as before.
Replace the solid login card with a translucent, backdrop-blurred 'liquid glass' panel and pill-shaped fields, shared across all auth pages (login, logout, token info, device activation). A graphite dark variant is applied automatically via prefers-color-scheme. The card width is responsive (min(360px, calc(100% - 2rem))) with a box-sizing fix so it fits small phones without overflowing. The token information page drops its inline max-width so it uses the same card. e2e VRT (chromium, webkit, mobile-pixel, mobile-safari) stays green: the light glass over the bright background renders within the existing screenshot tolerance, so no baselines needed regenerating.
The glass panel renders differently across CPU architectures (backdrop-filter), so the mobile-pixel/mobile-safari screenshots that passed locally on arm64 failed on amd64 CI. Update the 18 affected mobile baselines (login, logout, device activation, CheeseCookbook, LoginPage vrt) with the amd64 renders produced by CI.
The pill inputs used width:100% without box-sizing, so their horizontal padding pushed them ~38px past the card's right edge (text inputs default to content-box, unlike buttons). Add box-sizing:border-box to the inputs and the button so width:100% includes padding and they stay inside.
Update the mobile-pixel/mobile-safari baselines so they show the box-sizing fix (pill fields contained within the glass card) instead of the previous overflow. Renders captured from the amd64 CI runner to match the pipeline.
…t core dumps
- ./tooling.sh e2e --update-screenshots injects Playwright --update-snapshots
to rebuild the VRT baselines; --amd64 runs only the Playwright container as
linux/amd64 so rebuilt screenshots match the amd64 CI renderer.
- Add browser crash core dumps and Playwright run artifacts to .dockerignore
and .gitignore so a multi-GB core file can no longer break the release build
('no space left on device' during COPY . .).
KrisSimon
force-pushed
the
feature/liquid-glass-login
branch
from
July 9, 2026 09:04
5f77ace to
04ac298
Compare
The chromium/webkit/firefox desktop baselines still showed the old white card: on a 1920-wide screen the card is under the 5% screenshot tolerance, so CI kept passing and never updated them (firefox is not run in CI at all). Regenerate all 9 glass pages across the three desktop browsers so the reference images match the live glass UI.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Modernises the login UI with a Liquid Glass design and cleans up a couple of adjacent behaviours.
@media (prefers-color-scheme: dark); light frosted glass is the default.width: min(360px, calc(100% - 2rem))+box-sizing: border-boxso the card always fits with a side gutter (verified 320–390px); removes the now-redundant mobile-gutter media query..login-box, so login, logout, token-info and device-activation cards share one look. The token page drops its inlinemax-widthto use the standard card.Testing
Ran the full e2e CI matrix locally against a dirty build (
--dirty): chromium, webkit, mobile-pixel, mobile-safari — 734 passed, 26 skipped, 0 failed.No VRT baselines needed regenerating: the light glass over the bright landscape renders within the existing
maxDiffPixelRatio: 0.05screenshot tolerance on every browser.