diff --git a/packages/studio/src/components/editor/PromotableControl.tsx b/packages/studio/src/components/editor/PromotableControl.tsx
index cdfaee4bb..0ac6e1557 100644
--- a/packages/studio/src/components/editor/PromotableControl.tsx
+++ b/packages/studio/src/components/editor/PromotableControl.tsx
@@ -76,20 +76,14 @@ 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 ${gutterClass} ${bound ? "rounded-lg ring-1 ring-studio-accent/40" : ""}`}
-    >
+    <div className={`relative ${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-[100px] items-center gap-1 truncate rounded bg-studio-accent/20 px-1 py-px font-mono text-[8px] font-medium text-studio-accent"
+          // Sits above the row (not on top of top-0) so it clears a value that
+          // renders flush to the row's right edge, e.g. flat Font/Color rows.
+          className="pointer-events-none absolute -top-2 right-1.5 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"
           title={`Bound to variable "${promote.boundId}"`}
         >
           ◆ {promote.boundId}
@@ -103,7 +97,7 @@ export function PromotableControl({
             e.stopPropagation();
             promote.promote();
           }}
-          className="absolute right-1.5 top-0 z-10 inline-flex items-center gap-1 rounded bg-neutral-800/80 px-1 py-px font-mono text-[8px] font-medium text-neutral-400 opacity-70 transition-colors hover:bg-studio-accent/20 hover:text-studio-accent hover:opacity-100"
+          className="absolute -top-2 right-1.5 z-10 inline-flex items-center gap-1 rounded bg-neutral-800/80 px-1 py-px font-mono text-[8px] font-medium text-neutral-400 opacity-70 transition-colors hover:bg-studio-accent/20 hover:text-studio-accent hover:opacity-100"
         >
           ◇ var
         </button>