@nextclaw/ui 0.13.12 → 0.14.0

package/src/shared/components/doc-browser/doc-browser-tab-strip.tsx

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, PointerEvent, ReactElement } from "react";
+import type { PointerEvent } from "react";
 import {
   ArrowLeft,
   ArrowRight,
@@ -10,14 +10,13 @@ import {
   X,
 } from "lucide-react";
 import type { DocBrowserDockState, DocBrowserTab } from "./doc-browser-context";
+import {
+  CompactTabStrip,
+  type CompactTabStripAction,
+  type CompactTabStripTab,
+} from "@/shared/components/ui/tab-strip/compact-tab-strip";
 import { cn } from "@/shared/lib/utils";
 import { t } from "@/shared/lib/i18n";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/shared/components/ui/tooltip";
 
 type DocBrowserTabStripProps = {
   tabs: DocBrowserTab[];
@@ -38,53 +37,6 @@ type DocBrowserTabStripProps = {
   onToggleMode: () => void;
 };
 
-type DocBrowserIconActionButtonProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  "children" | "type"
-> & {
-  disabled?: boolean;
-  icon: ReactElement;
-  label: string;
-  variant?: "tab" | "toolbar";
-};
-
-function DocBrowserIconActionButton({
-  className,
-  disabled = false,
-  icon,
-  label,
-  variant = "toolbar",
-  ...buttonProps
-}: DocBrowserIconActionButtonProps) {
-  const button = (
-    <button
-      {...buttonProps}
-      type="button"
-      disabled={disabled}
-      className={cn(
-        variant === "toolbar"
-          ? "rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 disabled:cursor-not-allowed disabled:text-gray-300 disabled:opacity-60 disabled:hover:bg-transparent disabled:hover:text-gray-300"
-          : "rounded p-0.5 transition-colors hover:bg-black/10",
-        className,
-      )}
-      aria-label={label}
-    >
-      {icon}
-    </button>
-  );
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        {disabled ? <span className="inline-flex">{button}</span> : button}
-      </TooltipTrigger>
-      <TooltipContent side="bottom" className="text-xs">
-        {label}
-      </TooltipContent>
-    </Tooltip>
-  );
-}
-
 export function DocBrowserTabStrip({
   tabs,
   activeTabId,
@@ -112,115 +64,66 @@ export function DocBrowserTabStrip({
       : t("sideDockBuiltInDocked")
     : t("sideDockPinCurrent");
   const forwardLabel = t("docBrowserForward");
-  const modeLabel = isDocked
-    ? t("docBrowserFloatMode")
-    : t("docBrowserDockMode");
+  const modeLabel = isDocked ? t("docBrowserFloatMode") : t("docBrowserDockMode");
   const newTabLabel = t("docBrowserNewTab");
+  const compactTabs: CompactTabStripTab[] = tabs.map((tab) => ({
+    key: tab.id,
+    label: tab.title || t("docBrowserTabUntitled"),
+    active: tab.id === activeTabId,
+    tooltip: tab.title,
+    closeLabel: closeTabLabel,
+    closePlacement: "trailing",
+    onSelect: () => onSetActiveTab(tab.id),
+    onClose: () => onCloseTab(tab.id),
+  }));
+  const actions: CompactTabStripAction[] = [
+    { key: "back", disabled: !canGoBack, icon: <ArrowLeft className="h-3.5 w-3.5" />, label: backLabel, onClick: onGoBack },
+    { key: "forward", disabled: !canGoForward, icon: <ArrowRight className="h-3.5 w-3.5" />, label: forwardLabel, onClick: onGoForward },
+    { key: "new-tab", icon: <Plus className="h-3.5 w-3.5" />, label: newTabLabel, onClick: onOpenNewTab },
+    ...(dockState?.canDock
+      ? [
+          {
+            key: "dock",
+            disabled: dockState.isDocked && !dockState.removable,
+            icon: dockState.isDocked && dockState.removable ? <PinOff className="h-3.5 w-3.5" /> : <Pin className="h-3.5 w-3.5" />,
+            label: dockLabel,
+            onClick: () => onToggleDock?.(),
+          },
+        ]
+      : []),
+    ...(!isFullscreen
+      ? [
+          {
+            key: "mode",
+            icon: isDocked ? <Maximize2 className="h-3.5 w-3.5" /> : <PanelRightOpen className="h-3.5 w-3.5" />,
+            label: modeLabel,
+            onClick: onToggleMode,
+          },
+        ]
+      : []),
+    { key: "close", icon: <X className="h-3.5 w-3.5" />, label: closeLabel, onClick: onClose },
+  ];
 
   return (
-    <TooltipProvider delayDuration={250}>
-      <div
-        data-testid="doc-browser-tab-strip"
-        className={cn(
-          "flex h-11 items-stretch gap-2 px-2.5 bg-background border-b border-[#f1e7d4] shrink-0 select-none",
-          isFullscreen &&
-            "h-[calc(env(safe-area-inset-top,0px)+2.75rem)] pt-[env(safe-area-inset-top,0px)]",
-        )}
-        onPointerDown={!isDocked && !isFullscreen ? onDragStart : undefined}
-      >
-        <div
-          className="doc-browser-tab-scrollbar flex h-full min-w-0 flex-1 items-center gap-1.5 overflow-x-auto"
-          onPointerDown={(event) => event.stopPropagation()}
-        >
-          {tabs.map((tab) => {
-            const isActive = tab.id === activeTabId;
-            return (
-              <div
-                key={tab.id}
-                className={cn(
-                  "inline-flex items-center gap-1 h-7 px-1.5 rounded-lg text-xs border max-w-[220px] shrink-0 transition-colors",
-                  isActive
-                    ? "bg-amber-50/80 border-amber-200 text-amber-900 shadow-[0_1px_2px_rgba(30,20,10,0.04)]"
-                    : "bg-[#f9f8f5] border-[#eee3d1] text-[#78644d] hover:bg-[#fff7ea] hover:text-[#2f2212]",
-                )}
-              >
-                <button
-                  type="button"
-                  onClick={() => onSetActiveTab(tab.id)}
-                  className="truncate text-left px-1"
-                  title={tab.title}
-                >
-                  {tab.title || t("docBrowserTabUntitled")}
-                </button>
-                <DocBrowserIconActionButton
-                  icon={<X className="w-3 h-3" />}
-                  label={closeTabLabel}
-                  variant="tab"
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    onCloseTab(tab.id);
-                  }}
-                />
-              </div>
-            );
-          })}
-        </div>
-        <div
-          className="flex h-full items-center gap-1 shrink-0"
-          data-testid="doc-browser-tab-actions"
-          onPointerDown={(event) => event.stopPropagation()}
-        >
-          <DocBrowserIconActionButton
-            disabled={!canGoBack}
-            icon={<ArrowLeft className="w-3.5 h-3.5" />}
-            label={backLabel}
-            onClick={onGoBack}
-          />
-          <DocBrowserIconActionButton
-            disabled={!canGoForward}
-            icon={<ArrowRight className="w-3.5 h-3.5" />}
-            label={forwardLabel}
-            onClick={onGoForward}
-          />
-          <DocBrowserIconActionButton
-            icon={<Plus className="w-3.5 h-3.5" />}
-            label={newTabLabel}
-            onClick={onOpenNewTab}
-          />
-          {dockState?.canDock ? (
-            <DocBrowserIconActionButton
-              disabled={dockState.isDocked && !dockState.removable}
-              icon={
-                dockState.isDocked && dockState.removable ? (
-                  <PinOff className="w-3.5 h-3.5" />
-                ) : (
-                  <Pin className="w-3.5 h-3.5" />
-                )
-              }
-              label={dockLabel}
-              onClick={onToggleDock}
-            />
-          ) : null}
-          {!isFullscreen ? (
-            <DocBrowserIconActionButton
-              icon={
-                isDocked ? (
-                  <Maximize2 className="w-3.5 h-3.5" />
-                ) : (
-                  <PanelRightOpen className="w-3.5 h-3.5" />
-                )
-              }
-              label={modeLabel}
-              onClick={onToggleMode}
-            />
-          ) : null}
-          <DocBrowserIconActionButton
-            icon={<X className="w-3.5 h-3.5" />}
-            label={closeLabel}
-            onClick={onClose}
-          />
-        </div>
-      </div>
-    </TooltipProvider>
+    <CompactTabStrip
+      testId="doc-browser-tab-strip"
+      actionsTestId="doc-browser-tab-actions"
+      tabs={compactTabs}
+      actions={actions}
+      className={cn(
+        "h-11 gap-2 px-2.5 bg-background border-[#f1e7d4] shrink-0 select-none",
+        isFullscreen && "h-[calc(env(safe-area-inset-top,0px)+2.75rem)] pt-[env(safe-area-inset-top,0px)]",
+      )}
+      scrollClassName="doc-browser-tab-scrollbar flex h-full items-center gap-1.5"
+      tabsClassName="items-center gap-1.5"
+      actionsClassName="h-full items-center gap-1"
+      actionButtonClassName="rounded-md p-1.5 hover:text-gray-700 disabled:opacity-60"
+      tabBaseClassName="group inline-flex min-w-0 items-center gap-1 h-7 px-1.5 rounded-lg text-xs border max-w-[220px] shrink-0 transition-colors"
+      activeTabClassName="bg-amber-50/80 border-amber-200 text-amber-900 shadow-[0_1px_2px_rgba(30,20,10,0.04)]"
+      inactiveTabClassName="bg-[#f9f8f5] border-[#eee3d1] text-[#78644d] hover:bg-[#fff7ea] hover:text-[#2f2212]"
+      labelClassName="px-1 text-xs font-normal"
+      onPointerDown={!isDocked && !isFullscreen ? onDragStart : undefined}
+      onScrollPointerDown={(event) => event.stopPropagation()}
+    />
   );
 }

package/src/shared/components/doc-browser/doc-browser.tsx

@@ -381,19 +381,19 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
 
       {!isDocked && !isFullscreen && (
         <>
-          <div className="absolute top-0 left-0 h-1.5 w-full cursor-ns-resize z-20 hover:bg-primary/10 transition-colors" data-testid="doc-browser-resize-top" onPointerDown={startFloatResize('top')} />
+          <div className="absolute top-0 left-0 h-3 w-full cursor-ns-resize z-20 hover:bg-primary/10 transition-colors" data-testid="doc-browser-resize-top" onPointerDown={startFloatResize('top')} />
           <div
-            className="absolute top-0 left-0 w-1.5 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors"
+            className="absolute top-0 left-0 w-3 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors"
             data-testid="doc-browser-resize-left"
             onPointerDown={startFloatResize('left')}
           />
           <div
-            className="absolute top-0 right-0 w-1.5 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors"
+            className="absolute top-0 right-0 w-3 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors"
             data-testid="doc-browser-resize-right"
             onPointerDown={startFloatResize('right')}
           />
           <div
-            className="absolute bottom-0 left-0 h-1.5 w-full cursor-ns-resize z-20 hover:bg-primary/10 transition-colors"
+            className="absolute bottom-0 left-0 h-3 w-full cursor-ns-resize z-20 hover:bg-primary/10 transition-colors"
             data-testid="doc-browser-resize-bottom"
             onPointerDown={startFloatResize('bottom')}
           />

package/src/shared/components/doc-browser/managers/doc-browser.manager.ts

@@ -19,6 +19,11 @@ import {
 } from '@/shared/components/doc-browser/utils/doc-browser-url.utils';
 import { DefaultDocBrowserRouteResolver } from '@/shared/components/doc-browser/utils/doc-browser-route-resolver.utils';
 import { useDocBrowserStore } from '@/shared/components/doc-browser/stores/doc-browser.store';
+import {
+  filterNavigationHistoryEntries,
+  pushNavigationHistoryEntry,
+  stepNavigationHistory,
+} from '@/shared/lib/navigation-history';
 
 const defaultDocBrowserRouteResolver = new DefaultDocBrowserRouteResolver();
 
@@ -74,15 +79,15 @@ function pushActiveHistory(
   state: DocBrowserState,
   entry: DocBrowserActiveHistoryEntry,
 ): DocBrowserState {
-  const current = state.activeHistory[state.activeHistoryIndex];
-  if (current && areActiveHistoryEntriesEquivalent(routeResolver, current, entry)) {
-    return state;
-  }
-  const activeHistory = [...state.activeHistory.slice(0, state.activeHistoryIndex + 1), entry];
+  const activeHistory = pushNavigationHistoryEntry(
+    { entries: state.activeHistory, index: state.activeHistoryIndex },
+    entry,
+    (current, next) => areActiveHistoryEntriesEquivalent(routeResolver, current, next),
+  );
   return {
     ...state,
-    activeHistory,
-    activeHistoryIndex: activeHistory.length - 1,
+    activeHistory: [...activeHistory.entries],
+    activeHistoryIndex: activeHistory.index,
   };
 }
 
@@ -366,29 +371,35 @@ export class DocBrowserManager {
 
   readonly goBack = (): void => {
     this.setSnapshot((prev) => {
-      if (prev.activeHistoryIndex <= 0) {
-        return prev;
-      }
-      const activeHistoryIndex = prev.activeHistoryIndex - 1;
-      const entry = prev.activeHistory[activeHistoryIndex];
-      if (!entry) {
+      const step = stepNavigationHistory(
+        { entries: prev.activeHistory, index: prev.activeHistoryIndex },
+        'back',
+      );
+      if (!step) {
         return prev;
       }
-      return restoreActiveHistoryEntry(this.routeResolver, { ...prev, activeHistoryIndex }, entry);
+      return restoreActiveHistoryEntry(this.routeResolver, {
+        ...prev,
+        activeHistory: [...step.history.entries],
+        activeHistoryIndex: step.history.index,
+      }, step.entry);
     });
   };
 
   readonly goForward = (): void => {
     this.setSnapshot((prev) => {
-      if (prev.activeHistoryIndex >= prev.activeHistory.length - 1) {
-        return prev;
-      }
-      const activeHistoryIndex = prev.activeHistoryIndex + 1;
-      const entry = prev.activeHistory[activeHistoryIndex];
-      if (!entry) {
+      const step = stepNavigationHistory(
+        { entries: prev.activeHistory, index: prev.activeHistoryIndex },
+        'forward',
+      );
+      if (!step) {
         return prev;
       }
-      return restoreActiveHistoryEntry(this.routeResolver, { ...prev, activeHistoryIndex }, entry);
+      return restoreActiveHistoryEntry(this.routeResolver, {
+        ...prev,
+        activeHistory: [...step.history.entries],
+        activeHistoryIndex: step.history.index,
+      }, step.entry);
     });
   };
 
@@ -417,20 +428,16 @@ export class DocBrowserManager {
         tabs: nextTabs,
         activeTabId: nextActiveId,
       };
-      const activeHistory = nextState.activeHistory.filter((entry) => entry.tabId !== tabId);
-      const activeHistoryBeforeIndex = nextState.activeHistory
-        .slice(0, nextState.activeHistoryIndex + 1)
-        .filter((entry) => entry.tabId !== tabId);
       const nextActiveTab = nextTabs.find((tab) => tab.id === nextActiveId) ?? nextTabs[0];
+      const activeHistory = filterNavigationHistoryEntries(
+        { entries: nextState.activeHistory, index: nextState.activeHistoryIndex },
+        (entry) => entry.tabId !== tabId,
+        createDocBrowserActiveHistoryEntry(nextActiveTab),
+      );
       const reconciledState = {
         ...nextState,
-        activeHistory: activeHistory.length > 0
-          ? activeHistory
-          : [createDocBrowserActiveHistoryEntry(nextActiveTab)],
-        activeHistoryIndex: Math.min(
-          Math.max(0, activeHistoryBeforeIndex.length - 1),
-          Math.max(0, activeHistory.length - 1),
-        ),
+        activeHistory: [...activeHistory.entries],
+        activeHistoryIndex: activeHistory.index,
       };
       return prev.activeTabId === tabId
         ? pushActiveHistory(this.routeResolver, reconciledState, createDocBrowserActiveHistoryEntry(nextActiveTab))

package/src/shared/components/resizable-right-panel/__tests__/resizable-right-panel.test.tsx

@@ -0,0 +1,66 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { ResizableRightPanel } from "@/shared/components/resizable-right-panel/resizable-right-panel";
+
+function firePointerEvent(
+  target: Window | Document | Node | Element,
+  type: string,
+  point: { clientX: number; pointerId?: number },
+) {
+  const event = new Event(type, { bubbles: true });
+  Object.defineProperties(event, {
+    clientX: { value: point.clientX },
+    pointerId: { value: point.pointerId ?? 1 },
+  });
+  fireEvent(target, event);
+}
+
+describe("ResizableRightPanel", () => {
+  beforeEach(() => {
+    HTMLElement.prototype.setPointerCapture = vi.fn();
+  });
+
+  it("resizes horizontally from the left handle and clamps to max width", () => {
+    render(
+      <ResizableRightPanel
+        data-testid="right-panel"
+        defaultWidth={420}
+        minWidth={320}
+        maxWidth={500}
+      >
+        Content
+      </ResizableRightPanel>,
+    );
+
+    firePointerEvent(
+      screen.getByTestId("resizable-right-panel-handle"),
+      "pointerdown",
+      { clientX: 800, pointerId: 1 },
+    );
+    firePointerEvent(window, "pointermove", { clientX: 600, pointerId: 1 });
+
+    expect(screen.getByTestId("right-panel").style.width).toBe("500px");
+    expect(
+      screen.getByTestId("resizable-right-panel-resize-shield"),
+    ).toBeTruthy();
+
+    firePointerEvent(window, "pointerup", { clientX: 600, pointerId: 1 });
+
+    expect(
+      screen.queryByTestId("resizable-right-panel-resize-shield"),
+    ).toBeNull();
+  });
+
+  it("does not render resize controls in overlay mode", () => {
+    render(
+      <ResizableRightPanel data-testid="right-panel" overlay>
+        Content
+      </ResizableRightPanel>,
+    );
+
+    expect(
+      screen.queryByTestId("resizable-right-panel-handle"),
+    ).toBeNull();
+    expect(screen.getByTestId("right-panel").className).toContain("fixed");
+  });
+});

package/src/shared/components/resizable-right-panel/resizable-right-panel.tsx

@@ -8,13 +8,14 @@ export function ResizableRightPanel({ children, className, style, defaultWidth =
   const [isResizing, setIsResizing] = useState(false);
   const [width, setWidth] = useState(defaultWidth);
 
-  const onResizeStart = (event: React.MouseEvent) => {
+  const onResizeStart = (event: React.PointerEvent<HTMLDivElement>) => {
     if (overlay) return;
     event.preventDefault();
     event.stopPropagation();
+    event.currentTarget.setPointerCapture?.(event.pointerId);
     setIsResizing(true);
     resizeRef.current = { startX: event.clientX, startWidth: width };
-    const onMove = (moveEvent: MouseEvent) => {
+    const onMove = (moveEvent: PointerEvent) => {
       const resizing = resizeRef.current;
       if (!resizing) return;
       const nextWidth = resizing.startWidth + resizing.startX - moveEvent.clientX;
@@ -23,11 +24,13 @@ export function ResizableRightPanel({ children, className, style, defaultWidth =
     const onUp = () => {
       setIsResizing(false);
       resizeRef.current = null;
-      window.removeEventListener("mousemove", onMove);
-      window.removeEventListener("mouseup", onUp);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
     };
-    window.addEventListener("mousemove", onMove);
-    window.addEventListener("mouseup", onUp);
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
   };
 
   return (
@@ -37,10 +40,10 @@ export function ResizableRightPanel({ children, className, style, defaultWidth =
       style={overlay ? style : { ...style, width }}
     >
       {!overlay ? (
-        <div className="absolute left-0 top-0 z-20 h-full w-1.5 cursor-ew-resize transition-colors hover:bg-primary/10" data-testid="resizable-right-panel-handle" onMouseDown={onResizeStart} />
+        <div className="absolute left-0 top-0 z-20 h-full w-3 cursor-ew-resize transition-colors hover:bg-primary/10" data-testid="resizable-right-panel-handle" onPointerDown={onResizeStart} />
       ) : null}
       <div className="flex h-full min-h-0 w-full flex-col overflow-hidden">{children}</div>
-      {isResizing ? <div className="absolute inset-0 z-10" /> : null}
+      {isResizing ? <div className="absolute inset-0 z-10 cursor-ew-resize" data-testid="resizable-right-panel-resize-shield" /> : null}
     </aside>
   );
 }

package/src/shared/components/ui/actions/icon-action-button.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/shared/components/ui/tooltip';
+import { cn } from '@/shared/lib/utils';
+
+type IconActionButtonProps = Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  'children' | 'type'
+> & {
+  icon: React.ReactNode;
+  label: string;
+  tooltip?: string | false | null;
+};
+
+const IconActionButton = React.forwardRef<HTMLButtonElement, IconActionButtonProps>(
+  ({ className, disabled = false, icon, label, tooltip, ...buttonProps }, ref) => {
+    const button = (
+      <button
+        {...buttonProps}
+        ref={ref}
+        type="button"
+        disabled={disabled}
+        aria-label={label}
+        className={cn(
+          'inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:cursor-not-allowed',
+          'text-gray-500 hover:bg-gray-100 hover:text-gray-900 disabled:text-gray-300 disabled:hover:bg-transparent disabled:hover:text-gray-300',
+          className
+        )}
+      >
+        {icon}
+      </button>
+    );
+    const content = tooltip === false ? null : tooltip ?? label;
+    if (!content) return button;
+    return (
+      <TooltipProvider delayDuration={250}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            {disabled ? <span className="inline-flex">{button}</span> : button}
+          </TooltipTrigger>
+          <TooltipContent side="bottom" className="text-xs">{content}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+);
+IconActionButton.displayName = 'IconActionButton';
+
+export { IconActionButton };

package/src/shared/components/ui/tab-strip/__tests__/compact-tab-strip.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  CompactTabStrip,
+  type CompactTabStripTab,
+} from "@/shared/components/ui/tab-strip/compact-tab-strip";
+
+const originalScrollIntoView = HTMLElement.prototype.scrollIntoView;
+
+afterEach(() => {
+  HTMLElement.prototype.scrollIntoView = originalScrollIntoView;
+});
+
+function tabs(activeKey: string): CompactTabStripTab[] {
+  return ["first", "second", "third"].map((key) => ({
+    key,
+    label: key,
+    active: key === activeKey,
+    onSelect: vi.fn(),
+  }));
+}
+
+describe("CompactTabStrip", () => {
+  it("scrolls the active tab into the horizontal viewport", () => {
+    const scrollIntoView = vi.fn();
+    HTMLElement.prototype.scrollIntoView = scrollIntoView;
+
+    const { rerender } = render(
+      <CompactTabStrip
+        tabs={tabs("first")}
+        actions={[]}
+        scrollTestId="compact-tabs"
+      />,
+    );
+
+    scrollIntoView.mockClear();
+
+    rerender(
+      <CompactTabStrip
+        tabs={tabs("second")}
+        actions={[]}
+        scrollTestId="compact-tabs"
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: "second" })).toBeTruthy();
+    expect(scrollIntoView).toHaveBeenCalledWith({
+      block: "nearest",
+      inline: "nearest",
+    });
+  });
+});