@sentry/junior-dashboard 0.261.0 → 0.262.0

package/src/client/components/Drawer.tsx

@@ -1,118 +1,29 @@
 import { X } from "lucide-react";
-import { useEffect, useRef, type ReactNode } from "react";
+import { useRef, type ReactNode } from "react";
 
-import {
-  acquireBodyScrollLock,
-  releaseBodyScrollLock,
-} from "../bodyScrollLock";
 import { cn } from "../styles";
 import { Button } from "./Button";
+import { Sheet, SheetBody, SheetClose, SheetContent } from "./Sheet";
 
-const focusableSelector = [
-  "a[href]",
-  "button:not([disabled])",
-  "input:not([disabled]):not([type='hidden'])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  "summary",
-  "[tabindex]:not([tabindex='-1'])",
-].join(",");
-
-/** Render an accessible modal drawer and own its focus and scroll lifecycle. */
+/** Render a side drawer with shared modal focus and dismissal behavior. */
 export function Drawer(props: {
   actions?: ReactNode;
   children: ReactNode;
   closeLabel: string;
-  dismissLabel: string;
   header: ReactNode;
   onClose(): void;
   openKey: string;
   titleId: string;
   width?: "default" | "wide" | "narrow";
 }) {
-  const dialogRef = useRef<HTMLDivElement>(null);
-  const onCloseRef = useRef(props.onClose);
-  const previousFocusRef = useRef<HTMLElement | undefined>(undefined);
-  onCloseRef.current = props.onClose;
-
-  useEffect(() => {
-    previousFocusRef.current =
-      document.activeElement instanceof HTMLElement
-        ? document.activeElement
-        : undefined;
-    acquireBodyScrollLock();
-    const focusFrame = requestAnimationFrame(() => {
-      dialogRef.current
-        ?.querySelector<HTMLElement>("[data-drawer-close]")
-        ?.focus();
-    });
-    const onKeyDown = (event: KeyboardEvent) => {
-      // An event detail drawer can open above a child conversation drawer.
-      // Only the last mounted drawer owns Escape and the focus trap.
-      const drawers = document.querySelectorAll("[data-dashboard-drawer]");
-      if (drawers[drawers.length - 1] !== dialogRef.current) return;
-      if (event.key === "Escape") {
-        event.preventDefault();
-        onCloseRef.current();
-        return;
-      }
-      if (event.key !== "Tab") return;
-
-      const dialog = dialogRef.current;
-      const focusable = Array.from(
-        dialog?.querySelectorAll<HTMLElement>(focusableSelector) ?? [],
-      ).filter(
-        (element) =>
-          element.tabIndex >= 0 && element.getClientRects().length > 0,
-      );
-      const first = focusable.at(0);
-      const last = focusable.at(-1);
-      if (!dialog || !first || !last) {
-        event.preventDefault();
-        return;
-      }
-      const active = document.activeElement;
-      if (event.shiftKey && (active === first || !dialog.contains(active))) {
-        event.preventDefault();
-        last.focus();
-      } else if (
-        !event.shiftKey &&
-        (active === last || !dialog.contains(active))
-      ) {
-        event.preventDefault();
-        first.focus();
-      }
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => {
-      cancelAnimationFrame(focusFrame);
-      window.removeEventListener("keydown", onKeyDown);
-      releaseBodyScrollLock();
-      const previousFocus = previousFocusRef.current;
-      previousFocusRef.current = undefined;
-      if (previousFocus?.isConnected) previousFocus.focus();
-    };
-  }, [props.openKey]);
-
+  const closeRef = useRef<HTMLButtonElement>(null);
   return (
-    <div
-      aria-labelledby={props.titleId}
-      aria-modal="true"
-      data-dashboard-drawer=""
-      className="fixed inset-0 z-50"
-      ref={dialogRef}
-      role="dialog"
-    >
-      <button
-        aria-label={props.dismissLabel}
-        className="absolute inset-0 cursor-default bg-dashboard-overlay"
-        onClick={props.onClose}
-        tabIndex={-1}
-        type="button"
-      />
-      <aside
+    <Sheet key={props.openKey} onClose={props.onClose} side="right">
+      <SheetContent
+        initialFocusRef={closeRef}
+        titleId={props.titleId}
+        side="right"
         className={cn(
-          "absolute top-0 right-0 grid h-full w-full grid-rows-[auto_minmax(0,1fr)] bg-dashboard-bg-elevated shadow-[-20px_0_60px_rgba(0,0,0,0.45)] md:border-l md:border-dashboard-border-strong",
           props.width === "wide"
             ? "md:w-[min(760px,94vw)]"
             : props.width === "narrow"
@@ -124,21 +35,24 @@ export function Drawer(props: {
           <div className="min-w-0">{props.header}</div>
           <div className="flex items-start gap-1.5">
             {props.actions}
-            <Button
-              aria-label={props.closeLabel}
-              data-drawer-close
-              onClick={props.onClose}
-              size="icon"
-              title="Close"
+            <SheetClose
+              render={
+                <Button
+                  ref={closeRef}
+                  aria-label={props.closeLabel}
+                  size="icon"
+                  title="Close"
+                />
+              }
             >
               <X aria-hidden="true" size={15} strokeWidth={2.25} />
-            </Button>
+            </SheetClose>
           </div>
         </header>
-        <div className="min-h-0 overflow-auto px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] md:px-5">
+        <SheetBody className="min-h-0 overflow-auto px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] md:px-5">
           {props.children}
-        </div>
-      </aside>
-    </div>
+        </SheetBody>
+      </SheetContent>
+    </Sheet>
   );
 }

package/src/client/components/README.md

@@ -80,8 +80,14 @@ token so each theme can redefine it.
   sentence-case text, with no border or fill. It is not a control.
 - **Messages.** Use `Notice` for compact transient messages and `FormNotice`
   for wrapping form recovery text.
-- **Overlays.** `Drawer` owns dismissal, focus trapping, focus return, scroll
-  locking, and panel layout. Context panels use it, not a separate modal.
+- **Overlays.** `Sheet` is a local adaptation of shadcn/ui's Base UI Sheet.
+  It uses Base UI Drawer for focus, dismissal, and native swipe support. The
+  app's shared scroll lock keeps it in sync with the mobile conversation shell.
+  `SheetContent` owns side placement, backdrop fade, and slide transitions.
+  `Drawer` adds a visible header and close control. `BottomSheet` adds a swipe
+  handle and keeps content scrolling separate from gestures. Both skip motion
+  when reduced motion is set. Docked conversation details use a non-modal aside
+  so the chat stays usable. The copied component's license is in `Sheet.LICENSE`.
   `Tooltip` and `IconButtonTooltip` own hover text.
 - **Identity.** `ActorAvatar`, `ParticipantAvatarStack`, and `ObjectIcon`.
   `ObjectIcon` owns native Ticket, Code change, Automation, Deployment, and
@@ -103,7 +109,10 @@ levels stay distinct.
   the row width while their labels fit. Rows that do not fit scroll sideways.
 - **Panel switches** use `SegmentedTabs`, which draws a pill track. Pass the
   selected value, items, change handler, and panel content. It owns tab and
-  panel labels and keyboard focus.
+  panel labels and keyboard focus. Pass `scroll` to keep the tabs fixed while
+  the panel content scrolls. That mode fills its frame and owns the content
+  padding, so its scrollbar stays at the frame edge. `BottomSheet` content owns
+  its own padding.
 
 Keep collection filters in `FilterTabList`.
 

package/src/client/components/SegmentedTabs.tsx

@@ -12,7 +12,7 @@ const segmentedTabsInsetClass = "gap-1 p-1";
 /** Style one tab or link in the segmented pill track. */
 export function segmentedTabClass(selected: boolean): string {
   return cn(
-    "min-h-9 cursor-pointer rounded-md border-0 px-3 py-2 font-sans text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus",
+    "min-h-9 cursor-pointer rounded-md border-0 px-1.5 py-2 font-sans text-xs font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus",
     selected
       ? "bg-dashboard-fill-strong text-dashboard-text"
       : "bg-transparent text-dashboard-text-muted hover:bg-dashboard-fill-faint hover:text-dashboard-text",
@@ -23,6 +23,8 @@ export function segmentedTabClass(selected: boolean): string {
 export function SegmentedTabs<const Value extends string>(props: {
   children: ReactNode;
   label: string;
+  /** Fill the frame with fixed tabs and padded, scrolling content. */
+  scroll?: boolean;
   /** `count` is the number of entries in the panel. Zero and unknown counts are hidden. */
   items: readonly { count?: number; label: string; value: Value }[];
   onChange(value: NoInfer<Value>): void;
@@ -31,10 +33,22 @@ export function SegmentedTabs<const Value extends string>(props: {
   const id = useId();
 
   return (
-    <div className="grid min-w-0 gap-4">
+    <div
+      className={cn(
+        "grid min-w-0",
+        props.scroll
+          ? "h-full min-h-0 grid-rows-[auto_minmax(0,1fr)]"
+          : "gap-4",
+      )}
+    >
       <div
         aria-label={props.label}
-        className={cn("flex", segmentedTabsFrameClass, segmentedTabsInsetClass)}
+        className={cn(
+          "flex min-w-0",
+          segmentedTabsFrameClass,
+          segmentedTabsInsetClass,
+          props.scroll && "m-4",
+        )}
         role="tablist"
       >
         {props.items.map((item, index) => (
@@ -88,7 +102,12 @@ export function SegmentedTabs<const Value extends string>(props: {
       </div>
       <div
         aria-labelledby={`${id}-${props.value}`}
-        className="min-w-0 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
+        className={cn(
+          "min-w-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus",
+          props.scroll
+            ? "min-h-0 overflow-y-auto overscroll-contain px-4 pb-[max(1rem,env(safe-area-inset-bottom))] focus-visible:-outline-offset-2"
+            : "rounded-md",
+        )}
         id={`${id}-panel`}
         role="tabpanel"
         tabIndex={0}

package/src/client/components/Sheet.LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 shadcn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/client/components/Sheet.tsx

@@ -0,0 +1,141 @@
+// Adapted from shadcn/ui's Base UI Sheet. Drawer adds native swipe support.
+// https://ui.shadcn.com/docs/components/base/sheet
+import { Drawer as SheetPrimitive } from "@base-ui/react/drawer";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type ReactNode,
+  type RefObject,
+} from "react";
+
+import {
+  acquireBodyScrollLock,
+  releaseBodyScrollLock,
+} from "../bodyScrollLock";
+import { cn } from "../styles";
+
+const SheetContext = createContext<{
+  closingRef: RefObject<boolean>;
+  popupRef: RefObject<HTMLDivElement | null>;
+  topmost: boolean;
+} | null>(null);
+
+// Separate roots can overlap when a resize mounts a sheet below an open drawer.
+// Only the last modal in document order may trap focus or handle dismissal.
+function subscribeToSheets(onChange: () => void) {
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.body, { childList: true, subtree: true });
+  return () => observer.disconnect();
+}
+
+/** Keep modal state until Base UI finishes its close transition. */
+export function Sheet(props: {
+  children: ReactNode;
+  onClose(): void;
+  side: "right" | "bottom";
+}) {
+  const [open, setOpen] = useState(false);
+  const closingRef = useRef(false);
+  const popupRef = useRef<HTMLDivElement>(null);
+  const topmost = useSyncExternalStore(
+    subscribeToSheets,
+    () => {
+      const modals = document.querySelectorAll("[data-dashboard-modal]");
+      const last = modals[modals.length - 1];
+      return popupRef.current ? last === popupRef.current : !last;
+    },
+    () => true,
+  );
+  useEffect(() => {
+    // The mobile conversation shell uses this same document scroll lock.
+    acquireBodyScrollLock();
+    setOpen(true);
+    return releaseBodyScrollLock;
+  }, []);
+
+  return (
+    <SheetContext value={{ closingRef, popupRef, topmost }}>
+      <SheetPrimitive.Root
+        open={open}
+        modal={topmost ? "trap-focus" : false}
+        disablePointerDismissal={!topmost}
+        swipeDirection={props.side === "bottom" ? "down" : "right"}
+        onOpenChange={(open, details) => {
+          if (!open && !topmost) {
+            details.cancel();
+            return;
+          }
+          closingRef.current = !open;
+          setOpen(open);
+        }}
+        onOpenChangeComplete={(open) => {
+          if (!open && closingRef.current) props.onClose();
+        }}
+      >
+        {props.children}
+      </SheetPrimitive.Root>
+    </SheetContext>
+  );
+}
+
+/** Close the enclosing sheet through its transition and focus lifecycle. */
+export const SheetClose = SheetPrimitive.Close;
+
+/** Render sheet chrome, a fading backdrop, and Base UI's focus boundary. */
+export function SheetContent(
+  props: {
+    children: ReactNode;
+    className?: string;
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    side: "right" | "bottom";
+  } & ({ label: string; titleId?: never } | { label?: never; titleId: string }),
+) {
+  const sheet = useContext(SheetContext);
+  const popupRef = sheet?.popupRef;
+  const portalRef = useRef<HTMLDivElement>(null);
+  return (
+    <>
+      <div ref={portalRef} className="contents" />
+      <SheetPrimitive.Portal container={portalRef}>
+        <SheetPrimitive.Backdrop className="fixed inset-0 z-50 bg-dashboard-overlay opacity-[calc(1-var(--drawer-swipe-progress,0))] transition-opacity duration-180 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[swiping]:transition-none motion-reduce:transition-none" />
+        <SheetPrimitive.Viewport className="pointer-events-none fixed inset-0 z-50">
+          <SheetPrimitive.Popup
+            ref={popupRef}
+            aria-modal={sheet?.topmost ? true : undefined}
+            aria-label={props.label}
+            aria-labelledby={props.titleId}
+            data-dashboard-modal=""
+            data-base-ui-swipe-ignore={props.side === "right" ? "" : undefined}
+            finalFocus={() =>
+              Boolean(sheet?.closingRef.current && sheet.topmost)
+            }
+            initialFocus={() => {
+              // A resize can mount a sheet beneath an existing event dialog.
+              const modals = document.querySelectorAll(
+                "[data-dashboard-modal]",
+              );
+              if (modals[modals.length - 1] !== popupRef?.current) return false;
+              return props.initialFocusRef?.current ?? true;
+            }}
+            className={cn(
+              "pointer-events-auto grid min-h-0 min-w-0 grid-rows-[auto_minmax(0,1fr)] bg-dashboard-bg-elevated outline-none transition-[opacity,transform] duration-180 ease-[cubic-bezier(0.2,0.8,0.2,1)] data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[swiping]:transition-none motion-reduce:transition-none",
+              props.side === "bottom"
+                ? "absolute inset-x-0 bottom-0 mx-auto h-[85dvh] max-h-full w-full max-w-2xl [transform:translateY(var(--drawer-swipe-movement-y,0px))] rounded-t-2xl border border-b-0 border-dashboard-border-strong shadow-[0_-12px_40px_rgba(0,0,0,0.25)] data-[ending-style]:[transform:translateY(100%)] data-[starting-style]:[transform:translateY(2.5rem)]"
+                : "absolute right-0 top-0 h-full w-full shadow-[-12px_0_40px_rgba(0,0,0,0.25)] data-[ending-style]:[transform:translateX(2.5rem)] data-[starting-style]:[transform:translateX(2.5rem)] md:border-l md:border-dashboard-border-strong",
+              props.className,
+            )}
+          >
+            {props.children}
+          </SheetPrimitive.Popup>
+        </SheetPrimitive.Viewport>
+      </SheetPrimitive.Portal>
+    </>
+  );
+}
+
+/** Keep text selection and scrolling separate from the swipe handle. */
+export const SheetBody = SheetPrimitive.Content;

package/src/client/conversations/{ConversationDetailsDrawer.tsx → ConversationDetails.tsx}

@@ -3,7 +3,7 @@ import { useState, type ReactNode } from "react";
 
 import { formatRelativeTime, formatTime } from "../format";
 import { ButtonLink } from "../components/Button";
-import { Drawer } from "../components/Drawer";
+import { ConversationDetailsFrame } from "./ConversationDetailsFrame";
 import { SegmentedTabs } from "../components/SegmentedTabs";
 import {
   ConversationChildAgents,
@@ -16,29 +16,27 @@ import {
 import { ShareConversationButton } from "./ShareConversationButton";
 import type { SubagentTranscriptTarget } from "./SubagentTranscriptDrawer";
 
-type DetailsTab = "agents" | "details" | "memories";
+type DetailsTab = "agents" | "summary" | "memories";
 
 /** Put conversation context before usage and diagnostic links. */
-export function ConversationDetailsDrawer(props: {
+export function ConversationDetails(props: {
   annotations: ReactNode;
   brief: ReactNode;
   conversationId: string;
   identity: ReactNode;
   lastActivityAt?: string;
   onClose(): void;
-  /** Open one child agent transcript. The details drawer closes first. */
+  /** Open one child agent transcript. Details closes first. */
   onOpenSubagent(target: SubagentTranscriptTarget): void;
   sentryConversationUrl?: string;
-  privacy: ReactNode;
   stats: ReactNode;
-  title: string;
 }) {
-  const [tab, setTab] = useState<DetailsTab>("details");
-  // Load both lists with the drawer so each tab can show its count.
+  const [tab, setTab] = useState<DetailsTab>("summary");
+  // Load both lists with details so each tab can show its count.
   const memories = useConversationMemories(props.conversationId);
   const agents = useConversationChildAgents(props.conversationId);
   const tabs = [
-    { label: "Details", value: "details" },
+    { label: "Summary", value: "summary" },
     {
       count: memories.data?.memories.length,
       label: "Memories",
@@ -46,37 +44,18 @@ export function ConversationDetailsDrawer(props: {
     },
     { count: agents.data?.agents.length, label: "Subagents", value: "agents" },
   ] as const;
-  const titleId = "conversation-details-drawer-title";
+
   const sections = [
-    { content: props.brief, title: "Summary" },
+    { content: props.brief, title: undefined },
     { content: props.annotations, title: "Linked work" },
     { content: props.identity, title: "Participants" },
     { content: props.stats, title: "Usage" },
   ].filter((section) => section.content != null);
 
   return (
-    <Drawer
-      closeLabel="Close conversation details"
-      dismissLabel="Dismiss conversation details"
-      header={
-        <>
-          <h2
-            className="m-0 min-w-0 break-words text-lg font-bold leading-tight text-dashboard-text"
-            id={titleId}
-          >
-            {props.title}
-          </h2>
-          <div className="mt-2 flex flex-wrap items-center gap-2">
-            {props.privacy}
-          </div>
-        </>
-      }
-      onClose={props.onClose}
-      openKey={props.conversationId}
-      titleId={titleId}
-      width="narrow"
-    >
+    <ConversationDetailsFrame onClose={props.onClose}>
       <SegmentedTabs
+        scroll
         items={tabs}
         label="Conversation details"
         onChange={setTab}
@@ -97,11 +76,13 @@ export function ConversationDetailsDrawer(props: {
             {sections.map((section) => (
               <section
                 className="grid min-w-0 gap-3 border-b border-dashboard-border pb-5 last:border-0 last:pb-0"
-                key={section.title}
+                key={section.title ?? "summary"}
               >
-                <h3 className="m-0 text-sm font-semibold text-dashboard-text">
-                  {section.title}
-                </h3>
+                {section.title ? (
+                  <h3 className="m-0 text-sm font-semibold text-dashboard-text">
+                    {section.title}
+                  </h3>
+                ) : null}
                 <div className="min-w-0 break-words font-sans text-sm leading-relaxed text-dashboard-text-muted">
                   {section.content}
                 </div>
@@ -113,7 +94,7 @@ export function ConversationDetailsDrawer(props: {
             No additional conversation details.
           </p>
         )}
-        {tab === "details" ? (
+        {tab === "summary" ? (
           <footer className="mt-5 grid gap-6 border-t border-dashboard-border pt-4 text-xs text-dashboard-text-muted">
             {props.lastActivityAt ? (
               <div className="flex flex-wrap items-baseline justify-between gap-2">
@@ -152,6 +133,6 @@ export function ConversationDetailsDrawer(props: {
           </footer>
         ) : null}
       </SegmentedTabs>
-    </Drawer>
+    </ConversationDetailsFrame>
   );
 }

package/src/client/conversations/ConversationDetailsFrame.tsx

@@ -0,0 +1,91 @@
+import { X } from "lucide-react";
+import {
+  useEffect,
+  useId,
+  useRef,
+  useSyncExternalStore,
+  type ReactNode,
+} from "react";
+
+import { Button } from "../components/Button";
+import { BottomSheet } from "../components/BottomSheet";
+
+const panelMediaQuery = "(min-width: 1280px)";
+
+function subscribeToPanelLayout(onChange: () => void) {
+  const media = window.matchMedia(panelMediaQuery);
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
+}
+
+function hasPanelSpace() {
+  return window.matchMedia(panelMediaQuery).matches;
+}
+
+/** Keep details beside the chat when space permits, or in a modal bottom sheet. */
+export function ConversationDetailsFrame(props: {
+  children: ReactNode;
+  onClose(): void;
+}) {
+  const titleId = useId();
+  const panel = useSyncExternalStore(
+    subscribeToPanelLayout,
+    hasPanelSpace,
+    () => false,
+  );
+  const closeRef = useRef<HTMLButtonElement>(null);
+  const wasPanel = useRef(panel);
+  useEffect(() => {
+    if (
+      panel &&
+      !wasPanel.current &&
+      !document.querySelector("[data-dashboard-modal]")
+    ) {
+      closeRef.current?.focus({ preventScroll: true });
+    }
+    wasPanel.current = panel;
+  }, [panel]);
+  if (!panel) {
+    return (
+      <BottomSheet label="Conversation details" onClose={props.onClose}>
+        {props.children}
+      </BottomSheet>
+    );
+  }
+
+  return (
+    <aside
+      aria-labelledby={titleId}
+      className="grid min-h-0 min-w-0 grid-rows-[auto_minmax(0,1fr)] border-l border-dashboard-border bg-dashboard-bg-elevated"
+      onKeyDown={(event) => {
+        if (
+          event.key === "Escape" &&
+          !event.defaultPrevented &&
+          !document.querySelector("[data-dashboard-modal]")
+        ) {
+          event.preventDefault();
+          props.onClose();
+        }
+      }}
+    >
+      <header className="flex items-center justify-between gap-3 border-b border-dashboard-border px-5 py-3">
+        <h2
+          aria-label="Conversation details"
+          className="m-0 text-base font-semibold text-dashboard-text"
+          id={titleId}
+        >
+          Details
+        </h2>
+        <Button
+          ref={closeRef}
+          aria-label="Close conversation details"
+          onClick={props.onClose}
+          size="icon"
+        >
+          <X aria-hidden="true" size={15} />
+        </Button>
+      </header>
+      <div className="min-h-0">{props.children}</div>
+    </aside>
+  );
+}

package/src/client/conversations/ConversationEventLog.tsx

@@ -200,7 +200,6 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
         ? createPortal(
             <Drawer
               closeLabel="Close event details"
-              dismissLabel="Dismiss event details"
               header={
                 <>
                   <h2