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 (
-    <div className={`relative ${bound ? "rounded-lg ring-1 ring-studio-accent/40" : ""}`}>
+    <div
+      className={`relative ${gutterClass} ${bound ? "rounded-lg ring-1 ring-studio-accent/40" : ""}`}
+    >
       {rendered}
       {bound && (
         <span
-          className="pointer-events-none absolute right-1.5 top-0 z-10 inline-flex max-w-[60%] items-center gap-1 truncate rounded bg-studio-accent/20 px-1 py-px font-mono text-[8px] font-medium text-studio-accent"
+          className="pointer-events-none absolute right-1.5 top-0 z-10 inline-flex max-w-[100px] items-center gap-1 truncate rounded bg-studio-accent/20 px-1 py-px font-mono text-[8px] font-medium text-studio-accent"
           title={`Bound to variable "${promote.boundId}"`}
         >
           ◆ {promote.boundId}