Skip to content

fix: post-mobile-UI regressions and Firefox paint artifacts - #978

Merged
nimish-ks merged 3 commits into
mainfrom
fix/post-mobile-ui-regressions
Aug 17, 2026
Merged

fix: post-mobile-UI regressions and Firefox paint artifacts#978
nimish-ks merged 3 commits into
mainfrom
fix/post-mobile-ui-regressions

Conversation

@rohan-chaturvedi

Copy link
Copy Markdown
Member

🔍 Overview

Follow-up fixes for issues found while testing after the mobile responsiveness release. Two are regressions from recently merged PRs, one is a long-standing auth UX bug surfaced by multi-org testing, and one is a Firefox-specific rendering artifact:

  • Improve Console mobile responsiveness #968 changed the Log out button's wrapper in the unlock keyring dialog to flex justify-end, which stretches the button to the full height of its row on sm+.
  • Fix long organization names overflowing the sidebar #969 made the org name in the sidebar switcher a full-width block w-full truncate span. The span sits inside a Headless UI Menu.Button, and buttons default to text-align: center — so the org name rendered centered instead of left-aligned.
  • Switching organisations to one with no locally cached device key left the unlock keyring dialog on an infinite "Initializing account keys..." spinner, requiring a hard refresh to reach the password prompt. Pre-existing; primarily affects SSO users (device keys are cached per-membership).
  • The "Getting started" guide's progress bars rendered with part of the bar thinner than the rest in Firefox on Linux (fine in Chromium).

💡 Proposed Changes

  • UnlockKeyringDialog — added items-start to the Log out button wrapper so the button keeps its standard height instead of stretching with the flex row (382a847).
  • Sidebar — added text-left to the org-name span in the switcher label, matching what Fix long organization names overflowing the sidebar #969 already did for the dropdown entries (382a847).
  • UnlockKeyringDialog — the dialog stays mounted across org switches (App Router keeps the [team] layout subtree alive across dynamic-param changes), so the devicePasswordExists flag survived from the previous org. The auto-unlock effect only ever set the flag when it found a cached key and never cleared it, so an org with nothing cached rendered the spinner branch with no decrypt attempt running. The effect now resets the flag at the top of each run and lets the cache-hit branches re-assert it; React 18 batches the reset + re-set into one render, so orgs that do auto-unlock show no flash (9dfbed3).
  • GetStarted — flattened the task-card paint path to eliminate the primitives Firefox rasterized incorrectly (be2e526):
    • progress fill is a plain child with width: {progress} instead of a float-left + transform: scaleX(...) layer
    • card border is a real border instead of ring-1 ring-inset (an inset box-shadow)
    • rounding/clipping happens once via overflow-hidden on the card root; the track and fill are plain unrounded rects

No backend, schema, or dependency changes.

🖼️ Screenshots or Demo

image

📝 Release Notes

  • Fixed the unlock dialog showing an endless spinner when switching to an organisation whose keys aren't cached on the device — it now correctly prompts for your sudo password.
  • Fixed the oversized Log out button in the unlock dialog.
  • Fixed the organisation name appearing centered in the sidebar switcher.
  • Fixed "Getting started" progress bars rendering incorrectly in Firefox.

No breaking changes or migrations.

❓ Open Questions

  • The Firefox bar artifact was resolved by removing the fragile paint primitives (inset shadow, transformed fill layer, per-element rounded clip on a 2px box) rather than by pinpointing the exact WebRender internal at fault. The isolated markup rendered correctly in headless Firefox/Chromium at multiple DPRs, so the artifact only reproduces on real GPU compositing paths. If we ever want the old visuals back verbatim, this likely warrants an upstream bugzilla report first.

:test_pipeline: Testing

  • tsc --noEmit clean against the existing baseline.
  • Unlock flow: manually walked all paths — password user with valid/stale cached key, SSO user with valid/stale per-membership key, legacy stored-password migration (success + failure), and org switch into an org with nothing cached (the bug scenario). Failure paths (stale key → recovery redirect / prompt fallback) are unchanged.
  • Progress bars: rendered at 100% and partial progress in Chromium and Firefox headless; manually verified in Firefox on Linux (previously broken environment).
  • Gap: no automated tests — these are visual/client-state fixes; the unlock-dialog state machine has no test harness today.

🎯 Reviewer Focus

  • frontend/components/auth/UnlockKeyringDialog.tsx — the one-line reset in the auto-unlock effect is auth-adjacent; review the effect's early-return guard and the cache-hit branches to confirm the flag can't be cleared while a decrypt is legitimately pending.
  • frontend/components/dashboard/GetStarted.tsx — confirm the card root's new overflow-hidden doesn't clip anything you'd expect to escape (the CLI copy buttons are positioned within their own blocks, so they're safe).

➕ Additional Context

✨ How to Test the Changes Locally

  1. docker compose -f dev-docker-compose.yml up -d and log in.
  2. Unlock dialog spinner: be a member of two orgs; unlock org A with "Remember password" enabled, then clear the second org's cached key (or use an SSO account whose second org was never unlocked on this device) and switch to org B via the sidebar. You should get the sudo password prompt immediately — previously an endless spinner.
  3. Log out button: lock the keyring (fresh session), check the unlock dialog at a sm+ viewport — the Log out button should be normal height, top-aligned.
  4. Org switcher: with 2+ orgs, check the sidebar org label is left-aligned, expanded and after switching.
  5. Progress bars: open the org home "Getting started" guide in Firefox on Linux; collapse/expand each task card — the 2px bar should be uniform thickness edge to edge.

💚 Did You...

  • Ensure linting passes (code style checks)?
  • Update dependencies and lockfiles (if required) — n/a
  • Update migrations (if required) — n/a
  • Regenerate graphql schema and types (if required) — n/a
  • Verify the app builds locally?
  • Manually test the changes on different browsers/devices?

…ching to an org with no local key shows the password prompt instead of a stuck spinner
@nimish-ks nimish-ks self-assigned this Aug 17, 2026
@nimish-ks
nimish-ks merged commit c7a7ec3 into main Aug 17, 2026
14 of 15 checks passed
@nimish-ks
nimish-ks deleted the fix/post-mobile-ui-regressions branch August 17, 2026 18:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants