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

fix(studio): reserve a gutter for the promote-to-variable badge

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