diff --git a/frontend/src/App.css b/frontend/src/App.css
index c5791c9b..e4147ade 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -166,6 +166,12 @@ body {
   display: flex;
   align-items: stretch;
   flex-shrink: 0;
+  /* When the row genuinely cannot fit (narrow window + docked chat), wrap
+     the canvas controls onto a second line instead of letting flexbox
+     squeeze fixed blocks below their content — that used to crush the
+     Code/Both/Circuit toggle to a third of its width, clipping two of its
+     buttons into unreachable slivers. Two short rows beat hidden buttons. */
+  flex-wrap: wrap;
   background: #252526;
   border-bottom: 1px solid #333;
   min-height: 38px;
diff --git a/frontend/src/pages/EditorPage.tsx b/frontend/src/pages/EditorPage.tsx
index 6125525c..536afbee 100644
--- a/frontend/src/pages/EditorPage.tsx
+++ b/frontend/src/pages/EditorPage.tsx
@@ -461,6 +461,9 @@ export const EditorPage: React.FC = () => {
             className="view-mode-toggle"
             style={{
               display: 'flex',
+              // Never squeezed below its three buttons: flexbox used to crush
+              // this block to a third of its width and clip two of them.
+              flexShrink: 0,
               gap: 1,
               background: '#252526',
               border: '1px solid #3c3c3c',