From 5f045b6bdff145f0e0ec4b32aae475cefea989c1 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Thu, 16 Jul 2026 01:11:30 -0700
Subject: [PATCH] fix(studio): move the promote-to-variable badge above the row
 instead of a padding gutter

Shrinking the wrapped control's width to make room for the badge (previous
commit) fixed the overlap but pushed the value left unnecessarily. Move the
badge to sit above the row instead, clearing the value without touching its
layout.
---
 .../src/components/editor/PromotableControl.tsx  | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

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>