authorgravatar for 97427849+flamboh@users.noreply.github.comoliver <97427849+flamboh@users.noreply.github.com> 2026-10-13 19:35:14-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-10-13 23:35:14-03:00
log9c9ae43d80fa0e7a697257dc4cc9be950e534747
tree0d361a65fe534bee232fe6b8a6821ceff3bc43e3
parent5e5abc92f472d764f232316d41f33e9159b81056
signature Signed by PGP key B5690EEEBB952194

fix(web): auto-merge button fits its label and animates width changes (#19111)

2 files changed, 15 insertions(+), 16 deletions(-)

apps/web/src/components/AnimatedWidth.tsx+2-2
...@@ -16,8 +16,8 @@ export function AnimatedWidth({...@@ -16,8 +16,8 @@ export function AnimatedWidth({
16 useLayoutEffect(() => {16 useLayoutEffect(() => {
17 const element = contentRef.current;17 const element = contentRef.current;
18 if (!element) return;18 if (!element) return;
19 return observeResize(element, () => {19 return observeResize(element, (entries) => {
20 const nextWidth = Math.ceil(element.getBoundingClientRect().width);20 const nextWidth = Math.ceil(entries.at(-1)?.contentRect.width ?? 0);
21 if (nextWidth > 0) setWidth(nextWidth);21 if (nextWidth > 0) setWidth(nextWidth);
22 });22 });
23 }, []);23 }, []);
apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx+13-14
...@@ -2050,21 +2050,20 @@ export function PullRequestDetailPanel({...@@ -2050,21 +2050,20 @@ export function PullRequestDetailPanel({
2050 ) : (2050 ) : (
2051 <PullRequestGlyph.merged aria-hidden className="size-3.5" />2051 <PullRequestGlyph.merged aria-hidden className="size-3.5" />
2052 )}2052 )}
2053 <span className="inline-grid @max-[30rem]/pr-header:hidden">2053 <AnimatedWidth className="@max-[30rem]/pr-header:hidden">
2054 <span aria-hidden className="invisible col-start-1 row-start-1">2054 <span className="grid">
2055 {pendingAutoMergeLabel}2055 <span aria-hidden className="invisible col-start-1 row-start-1">
2056 </span>2056 {pendingAutoMergeLabel}
2057 <span aria-hidden className="invisible col-start-1 row-start-1">2057 </span>
2058 Confirm auto-merge?2058 <span className="col-start-1 row-start-1">
2059 </span>2059 {pendingAction === "enable-auto-merge"
2060 <span className="col-start-1 row-start-1">2060 ? "Enabling..."
2061 {pendingAction === "enable-auto-merge"2061 : inlineConfirm.isArmed("enable-auto-merge")
2062 ? "Enabling..."2062 ? "Confirm auto-merge?"
2063 : inlineConfirm.isArmed("enable-auto-merge")2063 : pendingAutoMergeLabel}
2064 ? "Confirm auto-merge?"2064 </span>
2065 : pendingAutoMergeLabel}
2066 </span>2065 </span>
2067 </span>2066 </AnimatedWidth>
2068 </Button>2067 </Button>
2069 </span>2068 </span>
2070 }2069 }