From fc27d53c8bf613a2d8fdfbad080ed90b3dc3b9a2 Mon Sep 17 00:00:00 2001
From: Valerii Kovalskii <kovalskyvr@mail.ru>
Date: Mon, 20 Jul 2026 09:17:32 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20Workspace=20UI=20=E2=80=94=20SVG=20split?=
 =?UTF-8?q?=20icons=20+=20full-height=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace the ▯/⊞ glyph layout buttons (rendered as tofu boxes in many
  fonts) with crisp inline SVG icons (1 / 2-col / 3-col / 2×2).
- Fill the content area edge-to-edge: drop the dashboard's 20px padding
  and scroll while the workspace is mounted (`.content:has(.workspace-wrap)`)
  and give the wrap height:100% instead of a brittle calc(100vh - 52px),
  which overflowed once the tab bar was added.

Verified: fresh load = 1 tab / 1 pane, no horizontal overflow, wrap
height exactly matches the content box, all four layout icons render.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/frontend/styles.css   | 17 +++++++++++++++--
 src/frontend/workspace.js | 15 +++++++++++----
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/frontend/styles.css b/src/frontend/styles.css
index 06f01bc..48a99b7 100644
--- a/src/frontend/styles.css
+++ b/src/frontend/styles.css
@@ -2749,10 +2749,15 @@ body {
 /* ── Changelog ──────────────────────────────────────────────── */
 
 /* ── Workspace (browser terminal) ──────────────────────────── */
+/* Terminal fills the content area edge-to-edge (drop the dashboard's 20px
+   padding + scroll only when the workspace is mounted). */
+.content:has(.workspace-wrap) { padding: 0; overflow: hidden; }
 .workspace-wrap {
     display: flex;
     flex-direction: column;
-    height: calc(100vh - 52px);
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
 }
 .workspace-bar {
     display: flex;
@@ -2764,7 +2769,15 @@ body {
 }
 .workspace-title { font-weight: 600; color: var(--text-primary); font-size: 13px; }
 .ws-layouts { display: flex; gap: 4px; }
-.ws-layouts .toolbar-btn { min-width: 34px; letter-spacing: 1px; }
+.ws-layout-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 8px;
+    color: var(--text-secondary);
+}
+.ws-layout-btn.active { color: var(--accent-blue); border-color: var(--accent-blue); }
+.ws-layout-btn svg { display: block; }
 .workspace-hint { font-size: 11px; color: var(--text-muted); }
 
 /* ── Tab bar (iTerm-like) ── */
diff --git a/src/frontend/workspace.js b/src/frontend/workspace.js
index 15d7d78..bfd620a 100644
--- a/src/frontend/workspace.js
+++ b/src/frontend/workspace.js
@@ -14,6 +14,13 @@
 
 var MAX_WS_PANES = 4;
 
+// Split-layout icons (glyph chars like ▯ render as tofu in many fonts).
+var _WS_SVG = 'width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3"';
+var _WS_ICON_1 = '<svg ' + _WS_SVG + '><rect x="2" y="3" width="12" height="10" rx="1"/></svg>';
+var _WS_ICON_2 = '<svg ' + _WS_SVG + '><rect x="2" y="3" width="5" height="10" rx="1"/><rect x="9" y="3" width="5" height="10" rx="1"/></svg>';
+var _WS_ICON_3 = '<svg ' + _WS_SVG + '><rect x="1.5" y="3" width="3.6" height="10" rx="1"/><rect x="6.2" y="3" width="3.6" height="10" rx="1"/><rect x="10.9" y="3" width="3.6" height="10" rx="1"/></svg>';
+var _WS_ICON_4 = '<svg ' + _WS_SVG + '><rect x="2" y="2.5" width="5" height="5" rx="1"/><rect x="9" y="2.5" width="5" height="5" rx="1"/><rect x="2" y="8.5" width="5" height="5" rx="1"/><rect x="9" y="8.5" width="5" height="5" rx="1"/></svg>';
+
 var WORKSPACE_AGENTS = [
   { label: 'Claude Code', cmd: 'claude' },
   { label: 'Codex', cmd: 'codex' },
@@ -353,10 +360,10 @@ async function renderWorkspace(container) {
       '<div class="ws-tabbar" id="wsTabbar"></div>' +
       '<div class="workspace-bar">' +
         '<div class="ws-layouts" role="group" aria-label="Split layout">' +
-          '<button class="toolbar-btn" id="wsLayout-1" title="1 pane" onclick="setWorkspaceLayout(1)">▯</button>' +
-          '<button class="toolbar-btn" id="wsLayout-2" title="2 panes" onclick="setWorkspaceLayout(2)">▯▯</button>' +
-          '<button class="toolbar-btn" id="wsLayout-3" title="3 panes" onclick="setWorkspaceLayout(3)">▯▯▯</button>' +
-          '<button class="toolbar-btn" id="wsLayout-4" title="4 panes (2×2)" onclick="setWorkspaceLayout(4)">⊞</button>' +
+          '<button class="toolbar-btn ws-layout-btn" id="wsLayout-1" title="1 pane" aria-label="1 pane" onclick="setWorkspaceLayout(1)">' + _WS_ICON_1 + '</button>' +
+          '<button class="toolbar-btn ws-layout-btn" id="wsLayout-2" title="2 panes" aria-label="2 panes" onclick="setWorkspaceLayout(2)">' + _WS_ICON_2 + '</button>' +
+          '<button class="toolbar-btn ws-layout-btn" id="wsLayout-3" title="3 panes" aria-label="3 panes" onclick="setWorkspaceLayout(3)">' + _WS_ICON_3 + '</button>' +
+          '<button class="toolbar-btn ws-layout-btn" id="wsLayout-4" title="4 panes (2×2)" aria-label="4 panes" onclick="setWorkspaceLayout(4)">' + _WS_ICON_4 + '</button>' +
         '</div>' +
         '<button class="toolbar-btn" id="wsAddPane" title="Add a pane to this tab" onclick="addWorkspacePane(null)">+ Pane</button>' +
         '<span style="flex:1"></span>' +