Make the theme builder preview bigger, not just less cramped (#46 follow-up)

Splitting the builder into a preview column and a fields column still
capped the mockup at half the dialog's width. Give it the full width of
the modal instead (name field on top, preview below spanning the whole
dialog, fields and the native-controls toggle underneath), and scale up
CustomThemePreview's own fixed pixel dimensions (~1.4x: avatar, sidebar,
paddings, font sizes) so the extra room reads as a genuinely bigger
mockup rather than the same small one with more empty space around it.
Modal width bumped from 820px to 960px to match.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/components/CustomThemePreview.css

@@ -4,9 +4,12 @@
   overflow: hidden;
   border: 1px solid var(--ds-border);
   margin-bottom: var(--sp-3);
-  font-size: 0.74rem;
+  /* Sized for ThemeBuilderModal's wide dialog (its only caller) -- this used
-  /* Isolated from the outer picker grid's own hover/highlight rules --
+     to run at ~0.74rem/96px when it had to fit alongside the color fields in
-     each swatch's highlight ring is drawn on itself, not inherited. */
+     a narrow modal; now that it gets the modal's full width, everything below
+     is scaled up ~1.4x so the extra room actually reads as bigger, not just
+     emptier. */
+  font-size: 1.02rem;
   position: relative;
 }
 
@@ -22,17 +25,17 @@
 }
 
 .ctp-sidebar {
-  width: 96px;
+  width: 132px;
   flex: none;
-  padding: 8px 6px;
+  padding: 11px 8px;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
 }
 
 .ctp-room-row {
-  padding: 5px 7px;
+  padding: 7px 10px;
-  border-radius: 5px;
+  border-radius: 7px;
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
@@ -47,21 +50,21 @@
 .ctp-main {
   flex: 1;
   min-width: 0;
-  padding: 10px;
+  padding: 14px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 11px;
 }
 
 .ctp-message {
   display: flex;
   align-items: flex-start;
-  gap: 6px;
+  gap: 9px;
 }
 
 .ctp-avatar {
-  width: 22px;
+  width: 32px;
-  height: 22px;
+  height: 32px;
   border-radius: 50%;
   flex: none;
 }
@@ -71,12 +74,12 @@
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 3px;
 }
 
 .ctp-mention {
-  border-radius: 4px;
+  border-radius: 5px;
-  padding: 0 3px;
+  padding: 0 5px;
   font-weight: 700;
 }
 
@@ -84,25 +87,25 @@
   flex: none;
   align-self: flex-start;
   border-radius: var(--radius-pill);
-  padding: 1px 7px;
+  padding: 2px 10px;
-  font-size: 0.68rem;
+  font-size: 0.88rem;
   font-weight: 800;
   color: #07080f;
 }
 
 .ctp-composer {
   border: 1px solid transparent;
-  border-radius: 6px;
+  border-radius: 8px;
-  padding: 5px 8px;
+  padding: 7px 11px;
 }
 
 .ctp-danger-btn {
   align-self: flex-start;
   background: transparent;
   border: 1px solid transparent;
-  border-radius: 6px;
+  border-radius: 8px;
-  padding: 4px 8px;
+  padding: 6px 11px;
-  font-size: 0.72rem;
+  font-size: 0.92rem;
   font-weight: 700;
   cursor: pointer;
 }

frontend/src/components/ThemeBuilderModal.css

@@ -1,22 +1,16 @@
 .theme-builder-modal {
-  width: min(820px, 95vw);
+  width: min(960px, 96vw);
-  max-height: 88vh;
+  max-height: 90vh;
 }
 
-.theme-builder-layout {
+.theme-builder-modal .custom-theme-preview {
-  display: grid;
+  margin-top: var(--sp-2);
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  margin-bottom: var(--sp-5);
-  gap: var(--sp-5);
+}
-  align-items: start;
+
+.theme-builder-lower {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-4);
   margin-bottom: var(--sp-2);
 }
-
-.theme-builder-preview-col .custom-theme-preview {
-  margin-bottom: var(--sp-4);
-}
-
-@media (max-width: 680px) {
-  .theme-builder-layout {
-    grid-template-columns: 1fr;
-  }
-}

frontend/src/components/ThemeBuilderModal.tsx

@@ -51,38 +51,21 @@ export function ThemeBuilderModal({
           </button>
         </div>
 
-        <div className="theme-builder-layout">
+        <input
-          <div className="theme-builder-preview-col">
+          type="text"
-            <input
+          className="custom-theme-name-input"
-              type="text"
+          value={name}
-              className="custom-theme-name-input"
+          onChange={(e) => onNameChange(e.target.value)}
-              value={name}
+          placeholder="Theme name"
-              onChange={(e) => onNameChange(e.target.value)}
+          maxLength={50}
-              placeholder="Theme name"
+        />
-              maxLength={50}
-            />
-            <CustomThemePreview colors={colors} highlightedField={highlightedField} onHighlight={onHighlight} />
-            <div className="custom-theme-scheme">
-              <span>Native controls (scrollbars, form inputs)</span>
-              <div className="custom-theme-scheme-toggle">
-                <button
-                  type="button"
-                  className={`btn-secondary${colors.color_scheme === 'light' ? ' custom-theme-scheme-active' : ''}`}
-                  onClick={() => onColorChange('color_scheme', 'light')}
-                >
-                  Light
-                </button>
-                <button
-                  type="button"
-                  className={`btn-secondary${colors.color_scheme === 'dark' ? ' custom-theme-scheme-active' : ''}`}
-                  onClick={() => onColorChange('color_scheme', 'dark')}
-                >
-                  Dark
-                </button>
-              </div>
-            </div>
-          </div>
 
+        {/* Full modal width, not sharing a column with the fields below --
+            the whole point of this dialog over the old inline editor is
+            room for this mockup to read at a legible size. */}
+        <CustomThemePreview colors={colors} highlightedField={highlightedField} onHighlight={onHighlight} />
+
+        <div className="theme-builder-lower">
           <div className="custom-theme-grid theme-builder-grid">
             {colorFields.map((field) => (
               <label
@@ -102,6 +85,26 @@ export function ThemeBuilderModal({
               </label>
             ))}
           </div>
+
+          <div className="custom-theme-scheme">
+            <span>Native controls (scrollbars, form inputs)</span>
+            <div className="custom-theme-scheme-toggle">
+              <button
+                type="button"
+                className={`btn-secondary${colors.color_scheme === 'light' ? ' custom-theme-scheme-active' : ''}`}
+                onClick={() => onColorChange('color_scheme', 'light')}
+              >
+                Light
+              </button>
+              <button
+                type="button"
+                className={`btn-secondary${colors.color_scheme === 'dark' ? ' custom-theme-scheme-active' : ''}`}
+                onClick={() => onColorChange('color_scheme', 'dark')}
+              >
+                Dark
+              </button>
+            </div>
+          </div>
         </div>
 
         {error && <p className="modal-error">{error}</p>}