Skip to content

Write the widget-era html width without viewport units #4074

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
paoloredis merged 1 commit into from
Sep 23, 2026
+12 −4
Merged

Write the widget-era html width without viewport units #4074

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions assets/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1879,11 +1879,19 @@ a[href*="#no-click"], img[src*="#no-click"] {
/* While the chat is closed, neutralize the width/margin compensation on
both elements so body fills the window exactly and its scrollbar sits at
the window edge, unclipped. While the panel is docked open (q-docked) the
widget's own geometry must win, so none of this applies then. */
widget's own geometry must win, so none of this applies then.

Full width is written with the widget's own variables rather than 100dvw:
its docking.js rewrites every vw/dvw unit in the page's stylesheets into
calc(1 * var(--qdvw)), and --qdvw is 100dvw minus N. With 100dvw here,
html ended up N short of the window, body's scrollbar appeared N inboard
of where the root scrollbar had been, and the centered layout shifted
~8px on every page load. --qdvw plus the widget's viewport offset is
exactly 100dvw, and contains nothing the rewriter touches. */
html[q-docked-target]:not([q-docked]) {
width: 100dvw !important;
min-width: 100dvw !important;
max-width: 100dvw !important;
width: calc(var(--qdvw) + var(--q-docked-viewport-offset)) !important;
min-width: calc(var(--qdvw) + var(--q-docked-viewport-offset)) !important;
max-width: calc(var(--qdvw) + var(--q-docked-viewport-offset)) !important;
margin-right: 0 !important;
}

Expand Down
Loading