From 4df6ba7ccca1d7610674ffb4f4b4e28e318b4df7 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Fri, 16 Oct 2026 12:29:36 +0700
Subject: [PATCH] fix(ui): expand develop sidebar width and fix ruler track and
 chip label wrapping in desktop STUDIO

---
 docker/frontend/src/App.tsx        |  4 ++-
 docker/frontend/src/styles/app.css | 50 ++++++++++++++++++++++++++----
 2 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/docker/frontend/src/App.tsx b/docker/frontend/src/App.tsx
index e338efb..26e6ccb 100644
--- a/docker/frontend/src/App.tsx
+++ b/docker/frontend/src/App.tsx
@@ -4392,10 +4392,11 @@ export function Workspace() {
         <div className="chips">
           {/* column 1 — the tab's own chips, RESET ruled off at the foot */}
           <div
+            key={tab === 'light' ? 'col-dev' : tab === 'create' ? 'col-create' : 'col-main'}
             className={`col col-main${tab === 'create' ? ' col-create' : ''}${
               tab === 'light' ? ' col-dev' : ''
             }`}
-            data-col="main"
+            data-col={tab === 'light' ? 'dev' : 'main'}
           >
             {/* The phone's way back is the path under the strip (see .crumb):
                 TABS > LIGHT > WB, each name returning to the strip it names.
@@ -4495,6 +4496,7 @@ 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 ? <ColGrip col="main" /> : null}
+            {tab === 'light' ? <ColGrip col="dev" min={320} max={600} /> : null}
             {tab === 'favorited' && saved.length === 0 ? <p className="hint">{t('sec.savedEmpty')}</p> : null}
 
             {/* RESET is the way out of an edit, not one more chip: it sits under
diff --git a/docker/frontend/src/styles/app.css b/docker/frontend/src/styles/app.css
index a484996..8e6992e 100644
--- a/docker/frontend/src/styles/app.css
+++ b/docker/frontend/src/styles/app.css
@@ -179,7 +179,17 @@
 }
 /* In a column the chips stack: one chip per row, full width. */
 .col .chip-row { flex-direction: column; align-items: stretch; }
-.col .chip { justify-content: space-between; text-align: left; }
+.col .chip {
+  justify-content: space-between;
+  text-align: left;
+  min-width: 0;
+}
+.col .chip .chip-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
 /* 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 {
@@ -228,6 +238,9 @@
 .chip-label {
   font-weight: 400;
   letter-spacing: 0.02em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .dev-box-title {
   font-weight: 700;
@@ -269,6 +282,13 @@
   padding: 4px 6px;
   font-size: 11px; line-height: 1.25;
   white-space: nowrap;
+  min-width: 0;
+}
+.chip-row.grid .chip .chip-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 }
 /* 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; }
@@ -1949,7 +1969,11 @@ form[data-key='immich-modal'] {
 /* The sidebar (DevelopPanels) draws rows, not chips, so its column is the wide
    one: the same width CREATE RECIPES takes, and the chips that are not knobs
    (AUTO, TONE CURVE) stack over it, wrapped in the column's own .chip-row. */
-.col-dev { width: 320px; }
+.col-dev {
+  width: 350px;
+  min-width: 320px;
+  flex: 0 0 auto;
+}
 .dev-panels {
   display: flex;
   flex-direction: column;
@@ -1980,6 +2004,7 @@ form[data-key='immich-modal'] {
   cursor: pointer;
   user-select: none;
   transition: background 0.15s ease;
+  min-width: 0;
 }
 .dev-panel-head:hover {
   background: var(--accent-soft);
@@ -1992,6 +2017,9 @@ form[data-key='immich-modal'] {
   font-weight: 600;
   color: var(--text);
   letter-spacing: -0.01em;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
 }
 .dev-chevron {
   display: inline-flex;
@@ -2000,6 +2028,7 @@ form[data-key='immich-modal'] {
   width: 12px;
   font-size: 11px;
   color: var(--text-dim);
+  flex: 0 0 auto;
 }
 .dev-panel-label {
   font-size: 12.5px;
@@ -2007,6 +2036,9 @@ form[data-key='immich-modal'] {
   color: var(--text);
   text-transform: none;
   letter-spacing: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .dev-toggle-switch {
   position: relative;
@@ -2047,6 +2079,7 @@ form[data-key='immich-modal'] {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 10px;
   margin-bottom: 8px;
   padding: 2px 0;
 }
@@ -2054,9 +2087,13 @@ form[data-key='immich-modal'] {
   font-size: 11.5px;
   color: var(--text-dim);
   font-weight: 500;
+  white-space: nowrap;
+  flex: 0 0 auto;
 }
 .dev-lut-select {
-  width: 150px;
+  flex: 1 1 auto;
+  min-width: 130px;
+  max-width: 190px;
   padding: 4px 8px;
   font-size: 11.5px;
   background: var(--bg);
@@ -2095,8 +2132,8 @@ form[data-key='immich-modal'] {
   gap: 10px;
 }
 .dev-panels .mini-head span {
-  flex: 0 0 88px;
-  width: 88px;
+  flex: 0 0 92px;
+  width: 92px;
   font-size: 11.5px;
   font-weight: 400;
   color: var(--text);
@@ -2108,7 +2145,7 @@ form[data-key='immich-modal'] {
 }
 .dev-panels .mini-head input[type="range"] {
   flex: 1 1 auto;
-  min-width: 0;
+  min-width: 90px;
   height: 16px;
 }
 .dev-panels .mini-head b {
@@ -2121,6 +2158,7 @@ form[data-key='immich-modal'] {
   color: var(--accent);
   letter-spacing: 0;
   font-variant-numeric: tabular-nums;
+  white-space: nowrap;
 }
 .dev-panels input[type="range"]::-webkit-slider-runnable-track {
   background: var(--border);