DarkSingularity/ds-chat
Private
Public Access
3
0
Fork 0
Code Releases 4 Activity

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

Browse Source 
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>
This commit is contained in:
ksmith
2026-08-17 13:14:45 -06:00
co-authored by Claude Sonnet 5
parent 4cfe230c82
commit 8a9a4d6b7b
3 changed files with 71 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/CustomThemePreview.css
+26 -23
View File
@@ -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;
}
frontend/src/components/ThemeBuilderModal.css
+11 -17
View File
@@ -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;
}
}
frontend/src/components/ThemeBuilderModal.tsx
+26 -23
View File
@@ -51,8 +51,6 @@ export function ThemeBuilderModal({
</button>
</div>
<div className="theme-builder-layout">
<div className="theme-builder-preview-col">
<input
type="text"
className="custom-theme-name-input"
@@ -61,7 +59,33 @@ export function ThemeBuilderModal({
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
key={field.key}
className={`custom-theme-field${highlightedField === field.key ? ' custom-theme-field-highlighted' : ''}`}
onMouseEnter={() => onHighlight(field.key)}
onMouseLeave={() => onHighlight(null)}
>
<input
type="color"
value={colors[field.key]}
onChange={(e) => onColorChange(field.key, e.target.value)}
onFocus={() => onHighlight(field.key)}
onBlur={() => onHighlight(null)}
/>
<span>{field.label}</span>
</label>
))}
</div>
<div className="custom-theme-scheme">
<span>Native controls (scrollbars, form inputs)</span>
<div className="custom-theme-scheme-toggle">
@@ -83,27 +107,6 @@ export function ThemeBuilderModal({
</div>
</div>
<div className="custom-theme-grid theme-builder-grid">
{colorFields.map((field) => (
<label
key={field.key}
className={`custom-theme-field${highlightedField === field.key ? ' custom-theme-field-highlighted' : ''}`}
onMouseEnter={() => onHighlight(field.key)}
onMouseLeave={() => onHighlight(null)}
>
<input
type="color"
value={colors[field.key]}
onChange={(e) => onColorChange(field.key, e.target.value)}
onFocus={() => onHighlight(field.key)}
onBlur={() => onHighlight(null)}
/>
<span>{field.label}</span>
</label>
))}
</div>
</div>
{error && <p className="modal-error">{error}</p>}
<div className="modal-actions">
<button type="button" className="btn-secondary" onClick={onCancel}>