From 944b876858148999e92af721aa14918614258853 Mon Sep 17 00:00:00 2001
From: EtienneLescot <etiennelescot@gmail.com>
Date: Sat, 5 Sep 2026 10:08:02 +0200
Subject: [PATCH] fix(editor): keep the camera preset labels inside their
 button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`.cursorCell` was drawn for the cursor grid: a square, icon-only cell. The
camera shape and camera background rows reuse it with a label under the icon,
and the label does not fit. The inspector is 300 px, the row is four tracks
wide, so each cell gets 61 px and 43 px of inner width. "Personnalisé" needs
about 65 px at 11 px, so it spilled over its own border and crowded the green
ring of the active cell next to it. `minmax(0, 1fr)` and `minWidth: 0` had
already stopped the text from pushing the grid track; nothing stopped it from
painting outside the button.

Not a French problem: es "Personalizado", it "Personalizzato" and ru
"Пользовательский" overflow the same way, and en "Original" sits right on the
limit. So the clip goes on `.cursorCell > span` once, where both rows and any
future labelled cell pick it up, rather than on a per-locale hope that the
strings stay short.

Side padding drops from 8 px to 4 px, which buys back 8 px of label room: only
the genuinely oversized labels reach the ellipsis now, and `title` carries the
full string for those.
---
 src/components/ai-edition/NewEditorShell.module.css | 11 +++++++++++
 src/components/ai-edition/RightPanes.tsx            | 12 ++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/ai-edition/NewEditorShell.module.css b/src/components/ai-edition/NewEditorShell.module.css
index 1c77efdf4..d2458328c 100644
--- a/src/components/ai-edition/NewEditorShell.module.css
+++ b/src/components/ai-edition/NewEditorShell.module.css
@@ -1202,6 +1202,17 @@
 	border-color: var(--brand);
 	box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand), transparent 75%);
 }
+/* Same cell, reused for the icon+label rows (camera shape, camera background).
+   `minmax(0, 1fr)` stopped a long label from pushing the grid, but the text still
+   spilled over the button's own border and crowded its neighbour -- « Personnalisé »,
+   « Пользовательский », "Personalizzato" in a 61 px track. Clip it here, once, for
+   every labelled cell instead of hoping each locale stays short. */
+.cursorCell > span {
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
 
 /* ─── chat strip + input ───────────────────────────────────────── */
 .chatStrip {
diff --git a/src/components/ai-edition/RightPanes.tsx b/src/components/ai-edition/RightPanes.tsx
index d81af75aa..2c0548f81 100644
--- a/src/components/ai-edition/RightPanes.tsx
+++ b/src/components/ai-edition/RightPanes.tsx
@@ -2845,7 +2845,7 @@ export function LayoutPane() {
 									style={{
 										flexDirection: "column",
 										gap: 4,
-										padding: 8,
+										padding: "8px 4px",
 										display: "flex",
 										alignItems: "center",
 										// Sans `minWidth: 0` le bouton garde son minimum de
@@ -2871,7 +2871,9 @@ export function LayoutPane() {
 									>
 										{shape.icon}
 									</svg>
-									<span style={{ font: "500 11px/1 var(--font-body)" }}>{ts(shape.labelKey)}</span>
+									<span title={ts(shape.labelKey)} style={{ font: "500 11px/1 var(--font-body)" }}>
+										{ts(shape.labelKey)}
+									</span>
 								</button>
 							);
 						})}
@@ -2926,7 +2928,7 @@ export function LayoutPane() {
 									style={{
 										flexDirection: "column",
 										gap: 4,
-										padding: 8,
+										padding: "8px 4px",
 										display: "flex",
 										alignItems: "center",
 										minWidth: 0,
@@ -2946,7 +2948,9 @@ export function LayoutPane() {
 									>
 										{mode.icon}
 									</svg>
-									<span style={{ font: "500 11px/1 var(--font-body)" }}>{ts(mode.labelKey)}</span>
+									<span title={ts(mode.labelKey)} style={{ font: "500 11px/1 var(--font-body)" }}>
+										{ts(mode.labelKey)}
+									</span>
 								</button>
 							);
 						})}