From 9fa1b265700473b9da14d198e0a00b8e74c4ee67 Mon Sep 17 00:00:00 2001 From: Vance Ingalls Date: Thu, 16 Jul 2026 01:06:11 -0700 Subject: [PATCH] fix(studio): reserve a gutter for the promote-to-variable badge MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PromotableControl absolutely-positions its "◇ var" / "◆ {id}" badge over the wrapped control without reserving any space, so on rows where the value renders flush to the right edge (flat Font/Color rows) the badge sat directly on top of the value text instead of beside it. Add a right-padding gutter on the wrapper sized to each badge state, and cap the bound chip to a fixed max-width so it always fits inside its gutter. --- .../src/components/editor/PromotableControl.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/studio/src/components/editor/PromotableControl.tsx b/packages/studio/src/components/editor/PromotableControl.tsx index b9644fbbd..cdfaee4bb 100644 --- a/packages/studio/src/components/editor/PromotableControl.tsx +++ b/packages/studio/src/components/editor/PromotableControl.tsx @@ -76,12 +76,20 @@ export function PromotableControl({ : { bound: false }, ); + // The badge is absolutely positioned over the wrapped control, so its own + // width doesn't push anything — without a matching right-padding reserve on + // the wrapper, a control whose value renders flush to the row's right edge + // (e.g. flat Font/Color rows) sits directly underneath it instead of beside it. + const gutterClass = bound ? "pr-16" : canPromote ? "pr-9" : ""; + return ( -
+
{rendered} {bound && ( ◆ {promote.boundId}