Spaces:
Running
Fix Bench canvas overflowing off-screen on windows narrower than ~1572px
Browse filesLive bug, reported with a screenshot: the "Try an example" button and the
CRISPR disclaimer banner were rendering cut off at the right edge of the
browser window in Bench mode, with no way to reach them.
Root cause: the bench-mode override for .workspace (app.css) sets
position:fixed with both left (392px, the rail width) and right:0, but never
resets the classic .workspace rule's max-width:1180px / width:100% (app.css
line 776). With left + right + width all specified on a fixed element, the
box is over-constrained — the browser honors width (100vw clamped to
1180px) and effectively ignores `right`, so the canvas became a fixed
1180px box starting at left:392px regardless of window size. On any window
under ~1572px wide (392+1180), that pushed real content off the visible
edge of the screen.
Fix: explicit width:auto; max-width:none on the bench-mode .workspace rule,
so left+right alone determine the box width (viewport - rail), which is
what "fill the remaining space next to the rail" actually requires. Verified
the canvas now exactly spans to the viewport edge at 1440px width with no
overflow, and confirmed classic UI (.workspace still max-width:1180px,
position:static) is completely untouched.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- dee/static/app.css +12 -2
- dee/static/index.html +1 -1
|
@@ -6645,10 +6645,20 @@ body[data-ui="bench"][data-bench="open"] .bench-canvashead {
|
|
| 6645 |
background: none; color: var(--ink); cursor: pointer; font-family: inherit; transition: border-color var(--t-fast); }
|
| 6646 |
.bench-verb:hover { border-color: var(--ink-strong); }
|
| 6647 |
|
| 6648 |
-
/* The workspace becomes the canvas (right of the rail, below the head)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 6649 |
body[data-ui="bench"][data-bench="open"] .workspace {
|
| 6650 |
position: fixed; top: calc(var(--bench-strip-h) + var(--bench-head-h)); left: var(--bench-rail);
|
| 6651 |
-
right: 0; bottom: 0; overflow: auto; padding: 0;
|
| 6652 |
}
|
| 6653 |
body[data-ui="bench"][data-bench="open"] .workspace > .view:not(.view--turing) { min-height: 100%; }
|
| 6654 |
|
|
|
|
| 6645 |
background: none; color: var(--ink); cursor: pointer; font-family: inherit; transition: border-color var(--t-fast); }
|
| 6646 |
.bench-verb:hover { border-color: var(--ink-strong); }
|
| 6647 |
|
| 6648 |
+
/* The workspace becomes the canvas (right of the rail, below the head).
|
| 6649 |
+
width:auto + max-width:none EXPLICITLY override the classic .workspace
|
| 6650 |
+
rule (max-width:1180px; width:100%, app.css:776) — without this, a
|
| 6651 |
+
position:fixed box with left+right+width all set is over-constrained, so
|
| 6652 |
+
the browser honors width (100% of viewport, clamped to 1180px) and
|
| 6653 |
+
effectively ignores `right`. The canvas ended up a fixed 1180px wide
|
| 6654 |
+
starting at left:392px regardless of window size — on anything narrower
|
| 6655 |
+
than ~1572px that pushes real content (card headers, buttons, disclaimer
|
| 6656 |
+
text) off the right edge of the screen, invisible with no way to reach
|
| 6657 |
+
it. left+right alone (width:auto) is what actually makes it "fill the
|
| 6658 |
+
remaining space next to the rail". */
|
| 6659 |
body[data-ui="bench"][data-bench="open"] .workspace {
|
| 6660 |
position: fixed; top: calc(var(--bench-strip-h) + var(--bench-head-h)); left: var(--bench-rail);
|
| 6661 |
+
right: 0; bottom: 0; overflow: auto; padding: 0; width: auto; max-width: none;
|
| 6662 |
}
|
| 6663 |
body[data-ui="bench"][data-bench="open"] .workspace > .view:not(.view--turing) { min-height: 100%; }
|
| 6664 |
|
|
@@ -112,7 +112,7 @@
|
|
| 112 |
<!-- ?v= query bumps invalidate browser + iframe asset caches when app.css /
|
| 113 |
app.js change. Bump these numbers whenever you ship a frontend update —
|
| 114 |
without them, users keep getting the stale file for up to a week. -->
|
| 115 |
-
<link rel="stylesheet" href="/static/app.css?v=20260714-
|
| 116 |
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg?v=2" />
|
| 117 |
<link rel="apple-touch-icon" href="/static/favicon.svg?v=2" />
|
| 118 |
<!-- Mol* (PDBe) 3-D viewer is ~4.9 MB. We do NOT eager-load it on every
|
|
|
|
| 112 |
<!-- ?v= query bumps invalidate browser + iframe asset caches when app.css /
|
| 113 |
app.js change. Bump these numbers whenever you ship a frontend update —
|
| 114 |
without them, users keep getting the stale file for up to a week. -->
|
| 115 |
+
<link rel="stylesheet" href="/static/app.css?v=20260714-bench-overflow-fix" />
|
| 116 |
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg?v=2" />
|
| 117 |
<link rel="apple-touch-icon" href="/static/favicon.svg?v=2" />
|
| 118 |
<!-- Mol* (PDBe) 3-D viewer is ~4.9 MB. We do NOT eager-load it on every
|