Tengo Gzirishvili Claude Sonnet 5 commited on
Commit
0a2b916
·
1 Parent(s): 1467efe

Fix Bench canvas overflowing off-screen on windows narrower than ~1572px

Browse files

Live 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>

Files changed (2) hide show
  1. dee/static/app.css +12 -2
  2. dee/static/index.html +1 -1
dee/static/app.css CHANGED
@@ -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
 
dee/static/index.html CHANGED
@@ -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-rail2" />
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