From 8a9a4d6b7b7e1fc8e585f6b65b22928d233ab39d Mon Sep 17 00:00:00 2001
From: Keith Smith <keithsmith@darksingularity.org>
Date: Mon, 17 Aug 2026 13:14:45 -0600
Subject: [PATCH] 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>
---
 .../src/components/CustomThemePreview.css     | 49 +++++++-------
 frontend/src/components/ThemeBuilderModal.css | 28 ++++----
 frontend/src/components/ThemeBuilderModal.tsx | 65 ++++++++++---------
 3 files changed, 71 insertions(+), 71 deletions(-)

diff --git a/frontend/src/components/CustomThemePreview.css b/frontend/src/components/CustomThemePreview.css
index 9294f68..8064e4e 100644
--- a/frontend/src/components/CustomThemePreview.css
+++ b/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;
-  /* Isolated from the outer picker grid's own hover/highlight rules --
-     each swatch's highlight ring is drawn on itself, not inherited. */
+  /* Sized for ThemeBuilderModal's wide dialog (its only caller) -- this used
+     to run at ~0.74rem/96px when it had to fit alongside the color fields in
+     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;
-  border-radius: 5px;
+  padding: 7px 10px;
+  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;
-  height: 22px;
+  width: 32px;
+  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;
-  padding: 0 3px;
+  border-radius: 5px;
+  padding: 0 5px;
   font-weight: 700;
 }
 
@@ -84,25 +87,25 @@
   flex: none;
   align-self: flex-start;
   border-radius: var(--radius-pill);
-  padding: 1px 7px;
-  font-size: 0.68rem;
+  padding: 2px 10px;
+  font-size: 0.88rem;
   font-weight: 800;
   color: #07080f;
 }
 
 .ctp-composer {
   border: 1px solid transparent;
-  border-radius: 6px;
-  padding: 5px 8px;
+  border-radius: 8px;
+  padding: 7px 11px;
 }
 
 .ctp-danger-btn {
   align-self: flex-start;
   background: transparent;
   border: 1px solid transparent;
-  border-radius: 6px;
-  padding: 4px 8px;
-  font-size: 0.72rem;
+  border-radius: 8px;
+  padding: 6px 11px;
+  font-size: 0.92rem;
   font-weight: 700;
   cursor: pointer;
 }
diff --git a/frontend/src/components/ThemeBuilderModal.css b/frontend/src/components/ThemeBuilderModal.css
index 423a089..fd1c7f1 100644
--- a/frontend/src/components/ThemeBuilderModal.css
+++ b/frontend/src/components/ThemeBuilderModal.css
@@ -1,22 +1,16 @@
 .theme-builder-modal {
-  width: min(820px, 95vw);
-  max-height: 88vh;
+  width: min(960px, 96vw);
+  max-height: 90vh;
 }
 
-.theme-builder-layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: var(--sp-5);
-  align-items: start;
+.theme-builder-modal .custom-theme-preview {
+  margin-top: var(--sp-2);
+  margin-bottom: var(--sp-5);
+}
+
+.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;
-  }
-}
diff --git a/frontend/src/components/ThemeBuilderModal.tsx b/frontend/src/components/ThemeBuilderModal.tsx
index 7d6cac6..6a3e380 100644
--- a/frontend/src/components/ThemeBuilderModal.tsx
+++ b/frontend/src/components/ThemeBuilderModal.tsx
@@ -51,38 +51,21 @@ export function ThemeBuilderModal({
           </button>
         </div>
 
-        <div className="theme-builder-layout">
-          <div className="theme-builder-preview-col">
-            <input
-              type="text"
-              className="custom-theme-name-input"
-              value={name}
-              onChange={(e) => onNameChange(e.target.value)}
-              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>
+        <input
+          type="text"
+          className="custom-theme-name-input"
+          value={name}
+          onChange={(e) => onNameChange(e.target.value)}
+          placeholder="Theme name"
+          maxLength={50}
+        />
 
+        {/* 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>}