fix(web): restore focus after narrow sidebar dismiss

Address review findings: keep SelectView unclipped (no overflow-hidden on
the header cluster), and use a distinct in-sidebar dismiss control that
returns focus to the header open toggle after close.

Co-authored-by: Tyler Dane <tyler-dane@users.noreply.github.com>

Author: cursoragent

packages/web/src/components/CalendarHeader/CalendarHeader.tsx

@@ -3,14 +3,9 @@ import { type FC } from "react";
 import { reloadLocation } from "@web/common/utils/browser/browser-navigation.util";
 import { ArrowButton } from "@web/components/Button/ArrowButton";
 import { SelectView } from "@web/components/SelectView/SelectView";
-import { useIsNarrowSidebarLayout } from "@web/components/Sidebar/hooks/useIsNarrowSidebarLayout";
 import { useVersionCheck } from "@web/components/Sidebar/SidebarActions/useVersionCheck";
 import { SidebarToggleButton } from "@web/components/Sidebar/SidebarToggleButton";
 import { TooltipWrapper } from "@web/components/Tooltip/TooltipWrapper";
-import {
-  selectIsSidebarOpen,
-  useViewStore,
-} from "@web/events/stores/view.store";
 
 interface Props {
   /** Left-aligned heading text (e.g. "June 2026" or "Wednesday, July 1"). */
@@ -43,18 +38,13 @@ export const CalendarHeader: FC<Props> = ({
   showNavigation = true,
 }) => {
   const { isUpdateAvailable } = useVersionCheck();
-  const isSidebarOpen = useViewStore(selectIsSidebarOpen);
-  const isNarrowLayout = useIsNarrowSidebarLayout();
-  // On narrow layouts the open sidebar hosts its own close control; keep a
-  // single "Close sidebar" name in the accessibility tree.
-  const showHeaderSidebarToggle = !isNarrowLayout || !isSidebarOpen;
 
   return (
     <div className="flex h-12 w-full shrink-0 items-center gap-3 text-text-muted">
-      {/* min-w-0 + overflow-hidden lets the title cluster yield space so the
-          sidebar toggle (shrink-0) stays visible when the main column is
-          squeezed by an open sidebar on a narrow viewport. */}
-      <div className="flex min-w-0 flex-1 items-center gap-3 overflow-hidden">
+      {/* min-w-0 lets the title cluster shrink so the sidebar toggle stays in
+          layout. Avoid overflow-hidden here — SelectView's menu is absolutely
+          positioned inside this cluster and must paint below the header. */}
+      <div className="flex min-w-0 flex-1 items-center gap-3">
         {showNavigation && onPrev && onNext && (
           <>
             <TooltipWrapper shortcut="J">
@@ -90,11 +80,9 @@ export const CalendarHeader: FC<Props> = ({
         ) : null}
       </div>
 
-      {showHeaderSidebarToggle ? (
-        <div className="z-2 flex shrink-0 items-center pr-5">
-          <SidebarToggleButton />
-        </div>
-      ) : null}
+      <div className="z-2 flex shrink-0 items-center pr-5">
+        <SidebarToggleButton />
+      </div>
     </div>
   );
 };

packages/web/src/components/Sidebar/SidebarCloseButton.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { createStoreWrapper } from "@web/__tests__/render-with-store";
+import {
+  selectIsSidebarOpen,
+  useViewStore,
+  viewActions,
+} from "@web/events/stores/view.store";
+import { SidebarCloseButton } from "./SidebarCloseButton";
+import { SidebarToggleButton } from "./SidebarToggleButton";
+import { beforeEach, describe, expect, it } from "bun:test";
+
+function Harness() {
+  const isOpen = useViewStore(selectIsSidebarOpen);
+  return (
+    <div>
+      <SidebarToggleButton />
+      {isOpen ? <SidebarCloseButton /> : null}
+    </div>
+  );
+}
+
+describe("SidebarCloseButton", () => {
+  beforeEach(() => {
+    viewActions.setSidebarOpen(true);
+  });
+
+  it("closes the sidebar and focuses the header open control", async () => {
+    const user = userEvent.setup();
+    const { wrapper } = createStoreWrapper();
+
+    render(<Harness />, { wrapper });
+
+    await user.click(screen.getByRole("button", { name: "Dismiss sidebar" }));
+
+    expect(
+      screen.queryByRole("button", { name: "Dismiss sidebar" }),
+    ).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(
+        screen.getByRole("button", { name: "Open sidebar" }),
+      ).toHaveFocus();
+    });
+  });
+});

packages/web/src/components/Sidebar/SidebarCloseButton.tsx

@@ -0,0 +1,37 @@
+import { XIcon } from "@phosphor-icons/react";
+import { type FC } from "react";
+import { TooltipWrapper } from "@web/components/Tooltip/TooltipWrapper";
+import { viewActions } from "@web/events/stores/view.store";
+
+/**
+ * Narrow-layout dismiss control rendered inside the sidebar. Uses a distinct
+ * accessible name from the header toggle so the two controls do not collide
+ * while the panel is open, and restores focus to the header "Open sidebar"
+ * control after close.
+ */
+export const SidebarCloseButton: FC = () => {
+  return (
+    <TooltipWrapper
+      description="Close sidebar"
+      onClick={() => {
+        viewActions.setSidebarOpen(false);
+        // The header toggle stays mounted and flips to "Open sidebar"; move
+        // focus there after this in-sidebar control unmounts.
+        window.setTimeout(() => {
+          document
+            .querySelector<HTMLButtonElement>('[aria-label="Open sidebar"]')
+            ?.focus();
+        }, 0);
+      }}
+      shortcut="]"
+    >
+      <button
+        type="button"
+        aria-label="Dismiss sidebar"
+        className="c-focus-ring flex h-6 w-6 cursor-pointer items-center justify-center text-text-muted"
+      >
+        <XIcon aria-hidden="true" size={16} />
+      </button>
+    </TooltipWrapper>
+  );
+};

packages/web/src/components/Sidebar/SidebarShell.test.tsx

@@ -55,28 +55,28 @@ afterEach(() => {
 });
 
 describe("SidebarShell", () => {
-  it("keeps the close control out of the sidebar on wide layouts", () => {
+  it("keeps the dismiss control out of the sidebar on wide layouts", () => {
     mockViewport(false);
     renderShell();
 
     expect(
-      screen.queryByRole("button", { name: "Close sidebar" }),
+      screen.queryByRole("button", { name: "Dismiss sidebar" }),
     ).not.toBeInTheDocument();
     expect(screen.getByText("Sidebar body")).toBeInTheDocument();
   });
 
-  it("shows a close control inside the sidebar on narrow layouts", async () => {
+  it("shows a dismiss control inside the sidebar on narrow layouts", async () => {
     const user = userEvent.setup();
     mockViewport(true);
     renderShell();
 
-    const closeButton = screen.getByRole("button", { name: "Close sidebar" });
+    const closeButton = screen.getByRole("button", { name: "Dismiss sidebar" });
     expect(closeButton).toBeInTheDocument();
 
     await user.click(closeButton);
 
     expect(
-      screen.queryByRole("button", { name: "Close sidebar" }),
+      screen.queryByRole("button", { name: "Dismiss sidebar" }),
     ).not.toBeInTheDocument();
   });
 });

packages/web/src/components/Sidebar/SidebarShell.tsx

@@ -8,7 +8,7 @@ import {
 import { useIsNarrowSidebarLayout } from "./hooks/useIsNarrowSidebarLayout";
 import { ShortcutsOverlay } from "./ShortcutsOverlay/ShortcutsOverlay";
 import { SidebarActions } from "./SidebarActions/SidebarActions";
-import { SidebarToggleButton } from "./SidebarToggleButton";
+import { SidebarCloseButton } from "./SidebarCloseButton";
 
 interface SidebarShellProps extends HTMLAttributes<HTMLElement> {
   children: ReactNode;
@@ -34,8 +34,7 @@ export function SidebarShell({
 }: SidebarShellProps) {
   const isNarrowLayout = useIsNarrowSidebarLayout();
   const isSidebarOpen = useViewStore(selectIsSidebarOpen);
-  // Only while open: during the collapse transition the shell stays mounted,
-  // and a still-rendered toggle would duplicate the header's "Open sidebar".
+  // Only while open: during the collapse transition the shell stays mounted.
   const showSidebarClose = isNarrowLayout && isSidebarOpen;
 
   return (
@@ -47,7 +46,7 @@ export function SidebarShell({
     >
       {showSidebarClose ? (
         <div className="flex shrink-0 items-center justify-end px-5 pb-2">
-          <SidebarToggleButton />
+          <SidebarCloseButton />
         </div>
       ) : null}
       {children}

packages/web/src/components/Sidebar/SidebarToggleButton.tsx

@@ -9,9 +9,9 @@ import {
 } from "@web/events/stores/view.store";
 
 /**
- * Shared open/close control for the right sidebar. Used in the calendar
- * header and, on narrow viewports, inside the sidebar itself when the
- * header control is squeezed out of view.
+ * Shared open/close control for the right sidebar. Lives in the calendar
+ * header; on narrow viewports SidebarShell also hosts a close control so the
+ * panel can be dismissed when this header control is hard to reach.
  */
 export const SidebarToggleButton: FC = () => {
   const isSidebarOpen = useViewStore(selectIsSidebarOpen);

packages/web/src/views/Life/LifeView.test.tsx

@@ -390,20 +390,20 @@ describe("LifeView", () => {
     });
 
     const inSidebarClose = screen.getByRole("button", {
-      name: "Close sidebar",
+      name: "Dismiss sidebar",
     });
     expect(sidebar.contains(inSidebarClose)).toBe(true);
 
     await user.click(inSidebarClose);
 
-    // Collapse keeps the panel mounted until the width transition ends; the
-    // header "Open sidebar" control returning is the observable close signal.
     expect(
-      screen.queryByRole("button", { name: "Close sidebar" }),
+      screen.queryByRole("button", { name: "Dismiss sidebar" }),
     ).not.toBeInTheDocument();
-    expect(
-      screen.getByRole("button", { name: "Open sidebar" }),
-    ).toBeInTheDocument();
+    await waitFor(() => {
+      expect(
+        screen.getByRole("button", { name: "Open sidebar" }),
+      ).toHaveFocus();
+    });
   });
 
   it("shows the privacy tooltip on the date of birth label", async () => {