diff --git a/docker/frontend/src/App.tsx b/docker/frontend/src/App.tsx
index 0ddd4a7..dab8c46 100644
--- a/docker/frontend/src/App.tsx
+++ b/docker/frontend/src/App.tsx
@@ -3061,7 +3061,7 @@ export function Workspace() {
},
},
wmSize: {
- label: 'TEXT SIZE', off: '1', value: String(markStyle.size),
+ label: 'TEXT SIZE', off: '1', value: typeof markStyle.size === 'number' ? `${Number(markStyle.size.toFixed(2))}` : String(markStyle.size),
options: WM_SIZES,
onPick: (v) => {
remember();
@@ -4508,10 +4508,14 @@ export function Workspace() {
)}
>
)}
- {/* MY PHOTOS and FAVORITED are lists of names rather than buttons, so
- their column is the visitor's to widen (see ColGrip). */}
- {listTab ? : null}
- {tab === 'light' ? : null}
+ {/* Every tab's column is resizable */}
+ {tab === 'light' ? (
+
+ ) : listTab ? (
+
+ ) : (
+
+ )}
{tab === 'favorited' && saved.length === 0 ?
{t('sec.savedEmpty')}
: null}
{/* RESET is the way out of an edit, not one more chip: it sits under
@@ -4599,6 +4603,7 @@ export function Workspace() {
/>
) : null}
+
) : null}
@@ -4606,9 +4611,7 @@ export function Workspace() {
{optGroup ? (
- {/* PHOTO STYLE is one name per look, so its strip is the visitor's
- to widen — the sims' names are longer than the column. */}
- {optGroup === 'style' ? : null}
+
{/* A watermark's colour: the presets above are a shortcut, the
well under them picks any colour at all. */}
{optGroup === 'wmColor' || optGroup === 'gpsColor' ? (
@@ -4646,6 +4649,7 @@ export function Workspace() {
{maskRulers.map((def) => (
))}
+
) : null}
{tab === 'presets' && showRecipes ? (
@@ -4707,6 +4711,7 @@ export function Workspace() {
>
{t('myp.remove')}
+
) : null}
@@ -4845,6 +4850,7 @@ export function Workspace() {
{t('frame.remove')}
+
) : null}
@@ -4861,6 +4867,7 @@ export function Workspace() {
{slider ? (
+
) : null}
diff --git a/docker/frontend/src/styles/app.css b/docker/frontend/src/styles/app.css
index 80bf704..2b85b83 100644
--- a/docker/frontend/src/styles/app.css
+++ b/docker/frontend/src/styles/app.css
@@ -110,7 +110,9 @@
overflow-y: hidden;
}
.col {
- width: var(--col-w);
+ min-width: var(--col-w);
+ width: fit-content;
+ max-width: 50vw;
flex: 0 0 auto;
height: 100%;
max-height: 100%;
@@ -174,9 +176,9 @@
}
.col-grip:hover, .col-grip:active { background: var(--accent-soft); }
.col:last-child { border-right: none; }
-.col-slider { width: var(--slider-w); }
+.col-slider { min-width: var(--slider-w); width: fit-content; }
/* CREATE RECIPES draws a two-up form, so its column is the wide one. */
-.col-create { width: 300px; }
+.col-create { min-width: 300px; width: fit-content; }
.col-sub { background: var(--bg-elev); }
.reset-row {
margin-top: 6px;
@@ -204,11 +206,13 @@
background: var(--border-soft);
}
/* In a column the chips stack: one chip per row, full width. */
-.col .chip-row { flex-direction: column; align-items: stretch; }
+.col .chip-row { flex-direction: column; align-items: stretch; width: 100%; }
.col .chip {
justify-content: space-between;
text-align: left;
min-width: 0;
+ width: 100%;
+ white-space: nowrap;
}
.col .chip .chip-label {
white-space: nowrap;
@@ -216,6 +220,11 @@
text-overflow: ellipsis;
min-width: 0;
}
+.col .chip .val {
+ flex-shrink: 0;
+ white-space: nowrap;
+ margin-left: 8px;
+}
/* A row of one KIND of value read against each other, not a strip to scan: WB's
presets, laid out as a table of buttons instead of a wrapping row. */
.chip-row.grid {
@@ -318,10 +327,8 @@
}
/* UNDO/REDO are one glyph each, so the pair reads as a single control. */
.header .btn.icon { padding: 4px 9px; font-size: 15px; line-height: 1.2; }
-/* WATERMARK's own column: its chips carry the longest labels in the app
- ("GPS WATERMARK OFF", "CUSTOM WATERMARK OFF" + PRO), which wrap in the
- default column width. */
-.wm-extra { border-right-color: var(--accent-line); width: 200px; }
+/* WATERMARK's own column: flexible size with min-width so all text/buttons fit completely */
+.wm-extra { border-right-color: var(--accent-line); min-width: 250px; width: fit-content; }
/* The watermark panel is two collapses, one per mark: each header chip stands
on its own controls (colour, face, switches, fields), and a rule keeps the
two apart while both marks are on. */
diff --git a/docker/frontend/src/ui/ChipColumn.tsx b/docker/frontend/src/ui/ChipColumn.tsx
index b6c2176..fdaa044 100644
--- a/docker/frontend/src/ui/ChipColumn.tsx
+++ b/docker/frontend/src/ui/ChipColumn.tsx
@@ -165,6 +165,14 @@ export function ColGrip({ col, min = 110, max = 560 }: { col: string; min?: numb
role="separator"
aria-orientation="vertical"
aria-label={`resize ${col}`}
+ title="Drag to resize column (double-click to auto-fit)"
+ onDoubleClick={() => {
+ const box = ref.current?.parentElement;
+ if (box) {
+ box.style.width = '';
+ keep(key, '');
+ }
+ }}
onPointerDown={(e) => {
const box = ref.current?.parentElement;
if (!box) return;