fix(web): keep the comment-settings save bar a compact centered pill - #667
Conversation
The floating save bar relied on shrink-to-fit plus `white-space: nowrap`, which overflowed its viewport-width cap on narrow screens. Size it explicitly to its content (`width: max-content`) and drop the nowrap so it stays a compact centered pill on desktop and wraps within the cap on mobile instead of overflowing. Width only, no behaviour change.
|
Important Review skippedAuto reviews are limited based on label configuration. 🏷️ Required labels (at least one) (2)
🚫 Excluded labels (none allowed) (1)
Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
uploads-web | 6a3ec7f | Commit Preview URL Branch Preview URL |
Aug 14 2026, 03:18 PM |
|
Maintained by uploads.sh — re-uploading a file with the same name updates it everywhere it is embedded. |
1 participant
Follow-up to #666. Two things: a width fix on the floating save bar, and the result of auditing whether that bar belongs on the other settings-style pages.
Save-bar width
The floating save bar was sized by shrink-to-fit plus
white-space: nowrap. That reads as a compact pill on desktop, but on a narrow viewport the nowrap content overflowed themax-width: calc(100vw - 32px)cap. This sizes it explicitly to its content (width: max-content) and drops the nowrap, so it stays a compact centered pill on desktop and wraps within the cap on mobile instead of overflowing. Width only — no behaviour change.Measured in the real signed-in shell:
Audit: does the floating bar belong on other settings pages?
Checked every settings-style / save-button surface. It only fits the GitHub comment page, and I did not migrate the others — on inspection they're a different interaction model, where a "you have unsaved changes → Save / Reset" bar would be worse, not more consistent:
settings/storage.astro) — a connect → verify → save wizard plus contextual action buttons (Re-run verification, Rotate credentials, Disconnect). "Save" is step 3 of the wizard, gated on a verification checklist. There's no persistent editable-settings state to be "unsaved".admin/oauth/[clientId].astro) — a read-only detail view with an Edit toggle that opens a modal-style form (Save changes / Cancel), on theAdminLayoutshell.The GitHub comment page is the one surface that's a flat list of persistent settings edited in place, which is exactly what the floating bar is for. Leaving Storage/OAuth on their inline controls is the right call; happy to revisit if you'd rather force uniformity.
Screenshots
Local dev server with the admin-gated section force-revealed and the bar pinned dirty; the auth banner up top is just the unauthenticated dev shell.