From 9c9ae43d80fa0e7a697257dc4cc9be950e534747 Mon Sep 17 00:00:00 2001
From: oliver <97427849+flamboh@users.noreply.github.com>
Date: Tue, 13 Oct 2026 19:35:14 -0700
Subject: [PATCH] fix(web): auto-merge button fits its label and animates width
 changes (#19111)

---
 apps/web/src/components/AnimatedWidth.tsx     |  4 +--
 .../pullRequest/PullRequestDetailPanel.tsx    | 27 +++++++++----------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/components/AnimatedWidth.tsx b/apps/web/src/components/AnimatedWidth.tsx
index d893f2b6aff68a1a774b6d335b7764568e776935..ef152402d6dc7c810db1940adda3ce636fadbe20 100644
--- a/apps/web/src/components/AnimatedWidth.tsx
+++ b/apps/web/src/components/AnimatedWidth.tsx
@@ -16,8 +16,8 @@ export function AnimatedWidth({
   useLayoutEffect(() => {
     const element = contentRef.current;
     if (!element) return;
-    return observeResize(element, () => {
-      const nextWidth = Math.ceil(element.getBoundingClientRect().width);
+    return observeResize(element, (entries) => {
+      const nextWidth = Math.ceil(entries.at(-1)?.contentRect.width ?? 0);
       if (nextWidth > 0) setWidth(nextWidth);
     });
   }, []);
diff --git a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
index 009205404d10ee7203835b05c394c56e58522c7c..92dd64d298ed395f45abb886c7dc230eb3dd2c7b 100644
--- a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
@@ -2050,21 +2050,20 @@ export function PullRequestDetailPanel({
                           ) : (
                             <PullRequestGlyph.merged aria-hidden className="size-3.5" />
                           )}
-                          <span className="inline-grid @max-[30rem]/pr-header:hidden">
-                            <span aria-hidden className="invisible col-start-1 row-start-1">
-                              {pendingAutoMergeLabel}
+                          <AnimatedWidth className="@max-[30rem]/pr-header:hidden">
+                            <span className="grid">
+                              <span aria-hidden className="invisible col-start-1 row-start-1">
+                                {pendingAutoMergeLabel}
+                              </span>
+                              <span className="col-start-1 row-start-1">
+                                {pendingAction === "enable-auto-merge"
+                                  ? "Enabling..."
+                                  : inlineConfirm.isArmed("enable-auto-merge")
+                                    ? "Confirm auto-merge?"
+                                    : pendingAutoMergeLabel}
+                              </span>
                             </span>
-                            <span aria-hidden className="invisible col-start-1 row-start-1">
-                              Confirm auto-merge?
-                            </span>
-                            <span className="col-start-1 row-start-1">
-                              {pendingAction === "enable-auto-merge"
-                                ? "Enabling..."
-                                : inlineConfirm.isArmed("enable-auto-merge")
-                                  ? "Confirm auto-merge?"
-                                  : pendingAutoMergeLabel}
-                            </span>
-                          </span>
+                          </AnimatedWidth>
                         </Button>
                       </span>
                     }
-- 
2.54.0