diff --git a/coordinator/tests/test_frontend_css.py b/coordinator/tests/test_frontend_css.py
index 2a1436c..4af29d5 100644
--- a/coordinator/tests/test_frontend_css.py
+++ b/coordinator/tests/test_frontend_css.py
@@ -90,3 +90,48 @@ def test_css_session_pill():
 def test_css_reduced_motion():
     css = read_css()
     assert "prefers-reduced-motion" in css
+
+
+def test_css_bg_surface_variable():
+    """--bg-surface variable must exist in :root."""
+    css = read_css()
+    assert "--bg-surface: #1A1F2B" in css
+
+
+def test_css_view_body_flex_layout():
+    """`.view-body` must have flex row layout properties."""
+    css = read_css()
+    assert ".view-body" in css
+    # Extract the .view-body rule block
+    view_body_idx = css.index(".view-body")
+    block_start = css.index("{", view_body_idx)
+    block_end = css.index("}", block_start)
+    block = css[block_start:block_end]
+    assert "display: flex" in block
+    assert "flex-direction: row" in block
+    assert "flex: 1" in block
+    assert "min-height: 0" in block
+    assert "overflow: hidden" in block
+
+
+def test_css_view_body_before_terminal_container():
+    """.view-body rule must appear before .terminal-container in the file."""
+    css = read_css()
+    assert ".view-body" in css
+    assert ".terminal-container" in css
+    assert css.index(".view-body") < css.index(".terminal-container")
+
+
+def test_css_terminal_container_min_width():
+    """.terminal-container must have min-width: 0 to prevent flex overflow."""
+    css = read_css()
+    terminal_idx = css.index(".terminal-container")
+    block_start = css.index("{", terminal_idx)
+    block_end = css.index("}", block_start)
+    block = css[block_start:block_end]
+    assert "min-width: 0" in block
+    # Existing properties preserved
+    assert "flex: 1" in block
+    assert "overflow: hidden" in block
+    assert "background: #000" in block
+    assert "padding: 0 4px" in block
diff --git a/frontend/style.css b/frontend/style.css
index 279d654..1c7748c 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -8,6 +8,7 @@
   --bg-header: #0D1117;    /* --color-bg-base (header matches page) */
   --bg-overlay: rgba(13, 17, 23, 0.85); /* brand base with opacity */
   --bg-tile-hover: #1A1F2B; /* --color-bg-surface */
+  --bg-surface: #1A1F2B;
 
   /* Text palette */
   --text: #F0F6FF;         /* --color-text-primary */
@@ -364,8 +365,17 @@ body {
   cursor: pointer;
 }
 
+.view-body {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
 .terminal-container {
   flex: 1;
+  min-width: 0;
   overflow: hidden;
   background: #000;
   padding: 0 4px;  /* keep text off the side edges */