feat(ui): make workspace layout responsive for narrow and mobile screens

Widen the assistant panel via a shared CSS variable, overlay it below
1180px, and add mobile breakpoints for the topbar, canvas controls,
toolbar, minimap, and bottom-sheet assistant panel. Use dvh units and
safe-area insets for mobile viewports.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/ui/styles.css

@@ -28,6 +28,7 @@
   --blue: #2563eb;
   --blue-soft: #dbeafe;
   --black: #050505;
+  --assistant-panel-width: 600px;
   --shadow-sm: 0 2px 8px rgba(17, 24, 39, 0.06);
   --shadow-md: 0 12px 30px rgba(17, 24, 39, 0.08);
 }
@@ -1167,6 +1168,12 @@ button:disabled {
   background: #f7f7f4;
 }
 
+@supports (height: 100dvh) {
+  .workspace-shell {
+    height: 100dvh;
+  }
+}
+
 .workspace-topbar {
   position: fixed;
   inset: 0 0 auto;
@@ -1269,11 +1276,20 @@ button:disabled {
 }
 
 .workspace-main {
+  position: relative;
+  width: 100%;
   height: calc(100vh - 48px);
   margin-top: 48px;
   min-height: 0;
+  overflow: hidden;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 400px;
+  grid-template-columns: minmax(0, 1fr) minmax(0, var(--assistant-panel-width));
+}
+
+@supports (height: 100dvh) {
+  .workspace-main {
+    height: calc(100dvh - 48px);
+  }
 }
 
 .assistant-panel-collapsed .workspace-main {
@@ -1524,6 +1540,7 @@ button:disabled {
   overflow: hidden;
   background: var(--canvas-background, #f7f7f4);
   cursor: default;
+  touch-action: none;
   user-select: none;
 }
 
@@ -3369,8 +3386,8 @@ button:disabled {
 
 .assistant-panel {
   position: relative;
-  width: 400px;
+  width: var(--assistant-panel-width);
-  max-width: 400px;
+  max-width: var(--assistant-panel-width);
   min-width: 0;
   min-height: 0;
   display: flex;
@@ -3726,6 +3743,23 @@ button:disabled {
   width: 348px;
 }
 
+@media (max-width: 1180px) {
+  .workspace-main {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .assistant-panel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 48;
+    width: min(var(--assistant-panel-width), calc(100vw - 16px));
+    max-width: calc(100vw - 16px);
+    box-shadow: -16px 0 40px rgba(17, 24, 39, 0.12);
+  }
+}
+
 @media (max-width: 980px) {
   .home-main {
     width: min(100% - 32px, 760px);
@@ -3746,14 +3780,6 @@ button:disabled {
     min-height: 300px;
   }
 
-  .workspace-main {
-    grid-template-columns: 1fr;
-  }
-
-  .assistant-panel {
-    display: none;
-  }
-
   .promo-strip {
     display: none;
   }
@@ -3803,10 +3829,194 @@ button:disabled {
   }
 
   .workspace-topbar {
-    grid-template-columns: 1fr auto;
+    justify-content: flex-start;
+    padding: 0 10px;
+  }
+
+  .workspace-countdown {
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  .workspace-countdown > span {
+    min-width: 18px;
+    height: 22px;
+    border-radius: 7px;
+    font-size: 11px;
+  }
+
+  .workspace-countdown div {
+    min-width: 0;
+    margin-left: 6px;
+    overflow: hidden;
+  }
+
+  .workspace-countdown b {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .workspace-actions .text-button {
     display: none;
   }
+
+  .workspace-stage-title {
+    left: 6px;
+    right: 132px;
+    min-width: 0;
+  }
+
+  .canvas-open-account-controls {
+    right: 8px;
+  }
+
+  .canvas-collapsed-controls {
+    top: 6px;
+    right: 6px;
+  }
+
+  .workspace-title-name strong {
+    max-width: min(126px, 36vw);
+  }
+
+  .workspace-title-edit {
+    width: min(170px, 46vw);
+  }
+
+  .assistant-panel {
+    top: auto;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    max-width: none;
+    height: min(72vh, calc(100% - 8px));
+    border-top: 1px solid #eceff3;
+    border-left: 0;
+    border-radius: 18px 18px 0 0;
+    box-shadow: 0 -18px 42px rgba(17, 24, 39, 0.14);
+    padding-bottom: max(8px, env(safe-area-inset-bottom));
+  }
+
+  .assistant-header {
+    flex: 0 0 44px;
+    min-height: 44px;
+  }
+
+  .assistant-header-title {
+    height: 44px;
+    padding-left: 14px;
+  }
+
+  .assistant-header-title strong {
+    font-size: 13px;
+  }
+
+  .assistant-header-actions {
+    gap: 4px;
+    padding-right: 8px;
+  }
+
+  .assistant-feed {
+    max-width: none;
+    gap: 22px;
+    padding: 14px 12px 28px;
+  }
+
+  .assistant-scroll-to-end button {
+    width: 36px;
+    height: 36px;
+  }
+
+  .canvas-layer-panel {
+    width: min(var(--layer-panel-width), calc(100vw - 32px));
+    max-width: calc(100vw - 32px);
+  }
+
+  .canvas-generated-files-panel {
+    width: min(var(--generated-files-panel-width), calc(100vw - 24px));
+    max-width: calc(100vw - 24px);
+  }
+
+  .canvas-bottom-left,
+  .canvas-bottom-left.is-offset-by-files-panel,
+  .canvas-bottom-left.is-offset-by-layers-panel {
+    left: 8px;
+    right: 8px;
+    bottom: calc(62px + env(safe-area-inset-bottom));
+  }
+
+  .canvas-statusbar {
+    max-width: calc(100vw - 16px);
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .canvas-statusbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .canvas-minimap {
+    width: min(220px, calc(100vw - 16px));
+    height: 136px;
+    border-radius: 14px;
+  }
+
+  .workspace-toolbar,
+  .workspace-toolbar.is-offset-by-files-panel,
+  .workspace-toolbar.is-offset-by-layers-panel {
+    left: 8px;
+    right: 8px;
+    bottom: calc(10px + env(safe-area-inset-bottom));
+    width: auto;
+    max-width: none;
+    justify-content: flex-start;
+    overflow-x: auto;
+    transform: none;
+    scrollbar-width: none;
+  }
+
+  .workspace-toolbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .workspace-toolbar button {
+    flex: 0 0 32px;
+  }
+
+  .workspace-toolbar-separator {
+    flex: 0 0 1px;
+  }
+
+  .pen-tool-controls,
+  .pen-tool-controls.is-offset-by-files-panel,
+  .pen-tool-controls.is-offset-by-layers-panel {
+    left: 8px;
+    right: 8px;
+    bottom: calc(62px + env(safe-area-inset-bottom));
+    max-width: none;
+    overflow-x: auto;
+    transform: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .workspace-countdown div {
+    display: none;
+  }
+
+  .workspace-stage-title {
+    right: 106px;
+  }
+
+  .canvas-conversation-button {
+    min-width: 46px;
+    padding: 0 8px;
+    font-size: 13px;
+  }
+
+  .canvas-collapsed-credit {
+    display: none;
+  }
 }