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