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>}