From 7d619d5122dbc80478c1611618ad4425c96f00d7 Mon Sep 17 00:00:00 2001
From: dinislam tebuev <3241533+tebuev@users.noreply.github.com>
Date: Sat, 15 Aug 2026 17:28:12 -0700
Subject: [PATCH 1/2] fix(editor): restore spacing between slider labels and
 values

---
 src/components/ai-edition/RightPanes.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/ai-edition/RightPanes.tsx b/src/components/ai-edition/RightPanes.tsx
index 5ac70471a..87bce1ed3 100644
--- a/src/components/ai-edition/RightPanes.tsx
+++ b/src/components/ai-edition/RightPanes.tsx
@@ -1627,9 +1627,9 @@ export function LayoutPane() {
 			{isPip ? (
 				<div className={styles.sliderGrid}>
 					<div className={`${styles.sliderCell} ${styles.full}`}>
-						<div className="head">
-							<span className="label">{ts("layout.webcamSize")}</span>
-							<span className="val">{Math.round(settings.webcamSizePreset)}%</span>
+						<div className={styles.head}>
+							<span className={styles.label}>{ts("layout.webcamSize")}</span>
+							<span className={styles.val}>{Math.round(settings.webcamSizePreset)}%</span>
 						</div>
 						<input
 							type="range"
@@ -1883,10 +1883,10 @@ export function SliderCell({
 }) {
 	return (
 		<div className={styles.sliderCell}>
-			<div className="head">
-				<span className="label">{label}</span>
+			<div className={styles.head}>
+				<span className={styles.label}>{label}</span>
 				{showValue ? (
-					<span className="val">
+					<span className={styles.val}>
 						{value.toFixed(decimals)}
 						{suffix}
 					</span>

From 297b962d88c8603281295057692bd5efcc0720d1 Mon Sep 17 00:00:00 2001
From: EtienneLescot <etiennelescot@gmail.com>
Date: Thu, 20 Aug 2026 10:53:36 +0200
Subject: [PATCH 2/2] fix(editor): apply the scoped-style fix to the remaining
 pane rows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The same `class="label"` typo this branch fixes in the slider cells is
live in 14 more places: every `.paneRow` label in the Effects, Layout,
Cursor, Captions and Export panes.

`.paneRow .label` in NewEditorShell.module.css is a local selector, so
both halves get hashed and the literal string matches nothing. No global
`.label` rule exists to fall back on, so those labels render at the
browser default instead of `500 var(--fs-app)` in `--fg-2` — the same
defect this branch's before/after screenshots show.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Co-Authored-By: dinislam tebuev <3241533+tebuev@users.noreply.github.com>
---
 src/components/ai-edition/CaptionsPane.tsx | 16 ++++++++--------
 src/components/ai-edition/ExportDialog.tsx |  2 +-
 src/components/ai-edition/RightPanes.tsx   | 10 +++++-----
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/ai-edition/CaptionsPane.tsx b/src/components/ai-edition/CaptionsPane.tsx
index c1f6d732d..7b4142fbf 100644
--- a/src/components/ai-edition/CaptionsPane.tsx
+++ b/src/components/ai-edition/CaptionsPane.tsx
@@ -182,7 +182,7 @@ export function CaptionsPane() {
 			</header>
 			<div className={styles.paneBody} style={{ padding: 0 }}>
 				<div className={styles.paneRow}>
-					<span className="label">{t("captions.show")}</span>
+					<span className={styles.label}>{t("captions.show")}</span>
 					<Toggle
 						checked={settings.enabled}
 						disabled={disabled || !hasTranscript}
@@ -275,7 +275,7 @@ export function CaptionsPane() {
 				{/* ── Language ───────────────────────────────────────────── */}
 				<div className={styles.sectionLabel}>{t("captions.language")}</div>
 				<div className={styles.paneRow}>
-					<span className="label">{t("captions.displayLanguage")}</span>
+					<span className={styles.label}>{t("captions.displayLanguage")}</span>
 					<select
 						value={settings.language ?? ""}
 						disabled={disabled}
@@ -358,7 +358,7 @@ export function CaptionsPane() {
 				{/* ── Text ───────────────────────────────────────────────── */}
 				<div className={styles.sectionLabel}>{t("captions.text")}</div>
 				<div className={styles.paneRow}>
-					<span className="label">{t("captions.font")}</span>
+					<span className={styles.label}>{t("captions.font")}</span>
 					<select
 						value={settings.fontFamily}
 						disabled={disabled}
@@ -373,7 +373,7 @@ export function CaptionsPane() {
 					</select>
 				</div>
 				<div className={styles.paneRow}>
-					<span className="label">{t("captions.bold")}</span>
+					<span className={styles.label}>{t("captions.bold")}</span>
 					<Toggle
 						checked={settings.fontWeight === "bold"}
 						disabled={disabled}
@@ -393,7 +393,7 @@ export function CaptionsPane() {
 					/>
 				</div>
 				<div className={styles.paneRow}>
-					<span className="label">{t("captions.textColor")}</span>
+					<span className={styles.label}>{t("captions.textColor")}</span>
 					<ColorField
 						label={t("captions.textColor")}
 						value={settings.color}
@@ -409,7 +409,7 @@ export function CaptionsPane() {
 				    background: the swatch keeps showing the remembered colour while the
 				    plate is off, because that is what turning it back on will draw. */}
 				<div className={styles.paneRow}>
-					<span className="label">{t("captions.background")}</span>
+					<span className={styles.label}>{t("captions.background")}</span>
 					<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
 						<ColorField
 							label={t("captions.backgroundColor")}
@@ -488,7 +488,7 @@ export function CaptionsPane() {
 				{/* ── Line length ────────────────────────────────────────── */}
 				<div className={styles.sectionLabel}>{t("captions.lineLength")}</div>
 				<div className={styles.paneRow}>
-					<span className="label">{t("captions.minWords")}</span>
+					<span className={styles.label}>{t("captions.minWords")}</span>
 					<select
 						value={settings.minWordsPerLine}
 						disabled={disabled}
@@ -503,7 +503,7 @@ export function CaptionsPane() {
 					</select>
 				</div>
 				<div className={styles.paneRow} style={{ marginBottom: 16 }}>
-					<span className="label">{t("captions.maxWords")}</span>
+					<span className={styles.label}>{t("captions.maxWords")}</span>
 					<select
 						value={settings.maxWordsPerLine}
 						disabled={disabled}
diff --git a/src/components/ai-edition/ExportDialog.tsx b/src/components/ai-edition/ExportDialog.tsx
index e640fbd19..ec8122f00 100644
--- a/src/components/ai-edition/ExportDialog.tsx
+++ b/src/components/ai-edition/ExportDialog.tsx
@@ -570,7 +570,7 @@ export function ExportDialog({ open, onClose, document }: ExportDialogProps) {
 							</div>
 						</div>
 						<div className={styles.paneRow} style={{ margin: 0 }}>
-							<span className="label">{t("exportDialog.loopGif")}</span>
+							<span className={styles.label}>{t("exportDialog.loopGif")}</span>
 							<button
 								type="button"
 								className={`${styles.toggle} ${gifLoop ? styles.isOn : ""}`}
diff --git a/src/components/ai-edition/RightPanes.tsx b/src/components/ai-edition/RightPanes.tsx
index 87bce1ed3..f725b8675 100644
--- a/src/components/ai-edition/RightPanes.tsx
+++ b/src/components/ai-edition/RightPanes.tsx
@@ -1380,7 +1380,7 @@ export function VideoEffectsPane() {
 	return (
 		<Pane title={ts("effects.title")} icon={<Sliders size={14} />} helpText={ts("effects.help")}>
 			<div className={styles.paneRow}>
-				<span className="label">{ts("effects.blurBg")}</span>
+				<span className={styles.label}>{ts("effects.blurBg")}</span>
 				<Toggle
 					checked={settings.showBlur}
 					disabled={!hasDocument}
@@ -1540,7 +1540,7 @@ export function LayoutPane() {
 				</select>
 			</div>
 			<div className={styles.paneRow}>
-				<span className="label">{ts("layout.mirrorWebcam")}</span>
+				<span className={styles.label}>{ts("layout.mirrorWebcam")}</span>
 				<Toggle
 					checked={settings.webcamMirrored}
 					disabled={layoutControlsDisabled}
@@ -1554,7 +1554,7 @@ export function LayoutPane() {
 			</div>
 			{supportsReactiveZoom ? (
 				<div className={styles.paneRow}>
-					<span className="label">{ts("layout.reactiveWebcam")}</span>
+					<span className={styles.label}>{ts("layout.reactiveWebcam")}</span>
 					<Toggle
 						checked={settings.webcamReactiveZoom}
 						disabled={layoutControlsDisabled}
@@ -1703,7 +1703,7 @@ export function CursorPane() {
 			helpText={ts("cursor.help")}
 		>
 			<div className={styles.paneRow}>
-				<span className="label">{ts("cursor.show")}</span>
+				<span className={styles.label}>{ts("cursor.show")}</span>
 				<Toggle
 					checked={settings.cursorShow}
 					disabled={!hasDocument}
@@ -1716,7 +1716,7 @@ export function CursorPane() {
 				/>
 			</div>
 			<div className={styles.paneRow}>
-				<span className="label">{ts("cursor.clipToBounds")}</span>
+				<span className={styles.label}>{ts("cursor.clipToBounds")}</span>
 				<Toggle
 					checked={settings.cursor.clipToBounds}
 					disabled={!hasDocument}