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({
1616 useLayoutEffect(() => {
1717 const element = contentRef.current;
1818 if (!element) return;
19 return observeResize(element, () => {
20 const nextWidth = Math.ceil(element.getBoundingClientRect().width);
19 return observeResize(element, (entries) => {
20 const nextWidth = Math.ceil(entries.at(-1)?.contentRect.width ?? 0);
2121 if (nextWidth > 0) setWidth(nextWidth);
2222 });
2323 }, []);
apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx+13-14
......@@ -2050,21 +2050,20 @@ export function PullRequestDetailPanel({
20502050 ) : (
20512051 <PullRequestGlyph.merged aria-hidden className="size-3.5" />
20522052 )}
2053 <span className="inline-grid @max-[30rem]/pr-header:hidden">
2054 <span aria-hidden className="invisible col-start-1 row-start-1">
2055 {pendingAutoMergeLabel}
2056 </span>
2057 <span aria-hidden className="invisible col-start-1 row-start-1">
2058 Confirm auto-merge?
2059 </span>
2060 <span className="col-start-1 row-start-1">
2061 {pendingAction === "enable-auto-merge"
2062 ? "Enabling..."
2063 : inlineConfirm.isArmed("enable-auto-merge")
2064 ? "Confirm auto-merge?"
2065 : pendingAutoMergeLabel}
2053 <AnimatedWidth className="@max-[30rem]/pr-header:hidden">
2054 <span className="grid">
2055 <span aria-hidden className="invisible col-start-1 row-start-1">
2056 {pendingAutoMergeLabel}
2057 </span>
2058 <span className="col-start-1 row-start-1">
2059 {pendingAction === "enable-auto-merge"
2060 ? "Enabling..."
2061 : inlineConfirm.isArmed("enable-auto-merge")
2062 ? "Confirm auto-merge?"
2063 : pendingAutoMergeLabel}
2064 </span>
20662065 </span>
2067 </span>
2066 </AnimatedWidth>
20682067 </Button>
20692068 </span>
20702069 }