From 6a68bee34f5ecfd478b6e2bd0af2ce39c0c32583 Mon Sep 17 00:00:00 2001
From: oliver <97427849+flamboh@users.noreply.github.com>
Date: Tue, 13 Oct 2026 10:34:46 -0700
Subject: [PATCH] fix(web): merge button fits its label and animates width
 changes (#18478)

---
 apps/web/src/components/AnimatedWidth.tsx     | 39 +++++++++++++++++++
 .../pullRequest/PullRequestDetailPanel.tsx    | 28 ++++++-------
 2 files changed, 53 insertions(+), 14 deletions(-)
 create mode 100644 apps/web/src/components/AnimatedWidth.tsx

diff --git a/apps/web/src/components/AnimatedWidth.tsx b/apps/web/src/components/AnimatedWidth.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d893f2b6aff68a1a774b6d335b7764568e776935
--- /dev/null
+++ b/apps/web/src/components/AnimatedWidth.tsx
@@ -0,0 +1,39 @@
+import { type ReactNode, useLayoutEffect, useRef, useState } from "react";
+
+import { observeResize } from "~/lib/observeResize";
+import { cn } from "~/lib/utils";
+
+export function AnimatedWidth({
+  children,
+  className,
+}: {
+  readonly children: ReactNode;
+  readonly className?: string;
+}) {
+  const contentRef = useRef<HTMLSpanElement>(null);
+  const [width, setWidth] = useState<number | null>(null);
+
+  useLayoutEffect(() => {
+    const element = contentRef.current;
+    if (!element) return;
+    return observeResize(element, () => {
+      const nextWidth = Math.ceil(element.getBoundingClientRect().width);
+      if (nextWidth > 0) setWidth(nextWidth);
+    });
+  }, []);
+
+  return (
+    <span
+      data-slot="animated-width"
+      className={cn(
+        "inline-block overflow-hidden transition-[width] duration-150 ease-out motion-reduce:transition-none",
+        className,
+      )}
+      style={width === null ? undefined : { width }}
+    >
+      <span ref={contentRef} className="block w-max whitespace-nowrap">
+        {children}
+      </span>
+    </span>
+  );
+}
diff --git a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
index 77bccacca464ae0fb36d7b9968108ead97b0e6d1..009205404d10ee7203835b05c394c56e58522c7c 100644
--- a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
@@ -2,6 +2,7 @@ import { parseChangeRequestUrl } from "@t3tools/shared/changeRequestUrl";
 import { useAtomValue } from "@effect/atom-react";
 import { usePullRequestStack } from "~/state/usePullRequestStack";
 import { RefreshIcon } from "~/components/ui/refresh-icon";
+import { AnimatedWidth } from "~/components/AnimatedWidth";
 import {
   scopedThreadKey,
   scopeProjectRef,
@@ -2122,21 +2123,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">
-                              {selectedMergeMethodLabel}
+                          <AnimatedWidth className="@max-[30rem]/pr-header:hidden">
+                            <span className="grid">
+                              <span aria-hidden className="invisible col-start-1 row-start-1">
+                                {selectedMergeMethodLabel}
+                              </span>
+                              <span className="col-start-1 row-start-1">
+                                {pendingAction === "merge"
+                                  ? "Merging..."
+                                  : inlineConfirm.isArmed("merge")
+                                    ? "Confirm merge?"
+                                    : selectedMergeMethodLabel}
+                              </span>
                             </span>
-                            <span aria-hidden className="invisible col-start-1 row-start-1">
-                              Confirm merge?
-                            </span>
-                            <span className="col-start-1 row-start-1">
-                              {pendingAction === "merge"
-                                ? "Merging..."
-                                : inlineConfirm.isArmed("merge")
-                                  ? "Confirm merge?"
-                                  : selectedMergeMethodLabel}
-                            </span>
-                          </span>
+                          </AnimatedWidth>
                         </Button>
                       </span>
                     }
-- 
2.54.0