ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-03 12:54:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(studio): move the promote-to-variable badge above the row instead of a padding gutter

Browse Source 
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.
This commit is contained in:
Vance Ingalls
2026-07-16 01:11:30 -07:00
parent 9fa1b26570
commit 5f045b6bdf
1 changed files with 5 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/components/editor/PromotableControl.tsx
+5 -11
View File
@@ -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>