@sentry/junior-dashboard 0.263.0 → 0.264.0

package/src/client/conversations/ConversationDetails.tsx

@@ -1,9 +1,10 @@
-import { ExternalLink } from "lucide-react";
 import { useState, type ReactNode } from "react";
 
-import { formatRelativeTime, formatTime } from "../format";
-import { ButtonLink } from "../components/Button";
-import { ConversationDetailsFrame } from "./ConversationDetailsFrame";
+import { IconButtonTooltip } from "../components/Tooltip";
+import {
+  ConversationDetailsFrame,
+  useConversationDetailsPanel,
+} from "./ConversationDetailsFrame";
 import { SegmentedTabs } from "../components/SegmentedTabs";
 import {
   ConversationChildAgents,
@@ -18,20 +19,25 @@ import type { SubagentTranscriptTarget } from "./SubagentTranscriptDrawer";
 
 type DetailsTab = "agents" | "summary" | "memories";
 
-/** Put conversation context before usage and diagnostic links. */
+/**
+ * Show conversation details: the brief and facts first, then linked work,
+ * participants, and the usage breakdown. Share and Sentry links stay in the
+ * header so every tab can reach them.
+ */
 export function ConversationDetails(props: {
   annotations: ReactNode;
   brief: ReactNode;
   conversationId: string;
   identity: ReactNode;
-  lastActivityAt?: string;
   onClose(): void;
-  /** Open one child agent transcript. Details closes first. */
+  /** Open one child agent transcript. A details sheet closes first. */
   onOpenSubagent(target: SubagentTranscriptTarget): void;
+  overview: ReactNode;
   sentryConversationUrl?: string;
-  stats: ReactNode;
+  usage: ReactNode;
 }) {
   const [tab, setTab] = useState<DetailsTab>("summary");
+  const panel = useConversationDetailsPanel();
   // Load both lists with details so each tab can show its count.
   const memories = useConversationMemories(props.conversationId);
   const agents = useConversationChildAgents(props.conversationId);
@@ -46,14 +52,38 @@ export function ConversationDetails(props: {
   ] as const;
 
   const sections = [
-    { content: props.brief, title: undefined },
-    { content: props.annotations, title: "Linked work" },
-    { content: props.identity, title: "Participants" },
-    { content: props.stats, title: "Usage" },
+    { content: props.overview, key: "overview", title: undefined },
+    { content: props.identity, key: "participants", title: "Participants" },
+    { content: props.annotations, key: "linked-work", title: "Linked work" },
+    { content: props.usage, key: "usage", title: "Usage" },
   ].filter((section) => section.content != null);
 
   return (
-    <ConversationDetailsFrame onClose={props.onClose}>
+    <ConversationDetailsFrame
+      actions={
+        <>
+          <ShareConversationButton
+            key={props.conversationId}
+            conversationId={props.conversationId}
+            layout="icon"
+          />
+          {props.sentryConversationUrl ? (
+            <IconButtonTooltip label="Open in Sentry" placement="below">
+              <a
+                aria-label="Open in Sentry"
+                className="grid size-9 place-items-center rounded-md text-dashboard-text-muted transition-colors hover:bg-dashboard-fill-strong hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus"
+                href={props.sentryConversationUrl}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <SentryGlyph />
+              </a>
+            </IconButtonTooltip>
+          ) : null}
+        </>
+      }
+      onClose={props.onClose}
+    >
       <SegmentedTabs
         scroll
         items={tabs}
@@ -67,26 +97,22 @@ export function ConversationDetails(props: {
           <ConversationChildAgents
             conversationId={props.conversationId}
             onOpenAgent={(target) => {
-              props.onClose();
+              // The panel stays beside the drawer. A modal sheet cannot.
+              if (!panel) props.onClose();
               props.onOpenSubagent(target);
             }}
           />
-        ) : sections.length > 0 ? (
-          <div className="grid min-w-0 gap-5">
+        ) : props.brief != null || sections.length > 0 ? (
+          <div className="grid min-w-0 gap-3">
+            {props.brief != null ? (
+              <div className="min-w-0 break-words px-1 pb-1 font-sans text-sm leading-relaxed text-dashboard-text-muted">
+                {props.brief}
+              </div>
+            ) : null}
             {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 ?? "summary"}
-              >
-                {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>
-              </section>
+              <DetailsSection key={section.key} title={section.title}>
+                {section.content}
+              </DetailsSection>
             ))}
           </div>
         ) : (
@@ -94,45 +120,37 @@ export function ConversationDetails(props: {
             No additional conversation details.
           </p>
         )}
-        {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">
-                <span>Last activity</span>
-                <time
-                  dateTime={props.lastActivityAt}
-                  title={formatTime(props.lastActivityAt, {
-                    dateStyle: "medium",
-                    timeStyle: "short",
-                  })}
-                >
-                  {formatRelativeTime(props.lastActivityAt)}
-                </time>
-              </div>
-            ) : null}
-            <div className="flex flex-wrap items-center gap-2">
-              <ShareConversationButton
-                key={props.conversationId}
-                conversationId={props.conversationId}
-              />
-              {props.sentryConversationUrl ? (
-                <ButtonLink
-                  className="w-fit focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
-                  to={props.sentryConversationUrl}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  Open in Sentry
-                  <ExternalLink
-                    aria-hidden="true"
-                    className="size-3.5 shrink-0"
-                  />
-                </ButtonLink>
-              ) : null}
-            </div>
-          </footer>
-        ) : null}
       </SegmentedTabs>
     </ConversationDetailsFrame>
   );
 }
+
+/** Group one kind of conversation detail in a compact card. */
+function DetailsSection(props: { children: ReactNode; title?: string }) {
+  return (
+    <section className="grid min-w-0 gap-2.5 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel p-3">
+      {props.title ? (
+        <h3 className="m-0 font-sans text-xs font-medium text-dashboard-text-muted">
+          {props.title}
+        </h3>
+      ) : null}
+      <div className="min-w-0 break-words font-sans text-xs leading-relaxed text-dashboard-text-muted">
+        {props.children}
+      </div>
+    </section>
+  );
+}
+
+/** Draw the Sentry glyph in the current text color, sized like a header icon. */
+function SentryGlyph() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="size-4"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path d="M13.91 2.505c-.873-1.448-2.972-1.448-3.844 0L6.904 7.92a15.478 15.478 0 0 1 8.53 12.811h-2.221A13.301 13.301 0 0 0 5.784 9.814l-2.926 5.06a7.65 7.65 0 0 1 4.435 5.848H2.194a.365.365 0 0 1-.298-.534l1.413-2.402a5.16 5.16 0 0 0-1.614-.913L.296 19.275a2.182 2.182 0 0 0 .812 2.999 2.24 2.24 0 0 0 1.086.288h6.983a9.322 9.322 0 0 0-3.845-8.318l1.11-1.922a11.47 11.47 0 0 1 4.95 10.24h5.915a17.242 17.242 0 0 0-7.885-15.28l2.244-3.845a.37.37 0 0 1 .504-.13c.255.14 9.75 16.708 9.928 16.9a.365.365 0 0 1-.327.543h-2.287c.029.612.029 1.223 0 1.831h2.297a2.206 2.206 0 0 0 1.922-3.31z" />
+    </svg>
+  );
+}

package/src/client/conversations/ConversationDetailsFrame.tsx

@@ -11,28 +11,42 @@ import { Button } from "../components/Button";
 import { BottomSheet } from "../components/BottomSheet";
 
 const panelMediaQuery = "(min-width: 1280px)";
+// Open details by default only when the chat column stays wide beside them.
+const defaultOpenMediaQuery = "(min-width: 1440px)";
 
-function subscribeToPanelLayout(onChange: () => void) {
-  const media = window.matchMedia(panelMediaQuery);
-  media.addEventListener("change", onChange);
-  return () => media.removeEventListener("change", onChange);
+function useMediaQuery(query: string): boolean {
+  return useSyncExternalStore(
+    (onChange) => {
+      const media = window.matchMedia(query);
+      media.addEventListener("change", onChange);
+      return () => media.removeEventListener("change", onChange);
+    },
+    () => window.matchMedia(query).matches,
+    () => false,
+  );
+}
+
+/**
+ * Report whether the viewport has room to show details as a panel beside the
+ * chat. Narrower viewports show details in a bottom sheet.
+ */
+export function useConversationDetailsPanel(): boolean {
+  return useMediaQuery(panelMediaQuery);
 }
 
-function hasPanelSpace() {
-  return window.matchMedia(panelMediaQuery).matches;
+/** Report whether details should open beside the chat without a request. */
+export function useConversationDetailsDefaultOpen(): boolean {
+  return useMediaQuery(defaultOpenMediaQuery);
 }
 
 /** Keep details beside the chat when space permits, or in a modal bottom sheet. */
 export function ConversationDetailsFrame(props: {
+  actions?: ReactNode;
   children: ReactNode;
   onClose(): void;
 }) {
   const titleId = useId();
-  const panel = useSyncExternalStore(
-    subscribeToPanelLayout,
-    hasPanelSpace,
-    () => false,
-  );
+  const panel = useConversationDetailsPanel();
   const closeRef = useRef<HTMLButtonElement>(null);
   const wasPanel = useRef(panel);
   useEffect(() => {
@@ -49,6 +63,12 @@ export function ConversationDetailsFrame(props: {
     return (
       <BottomSheet label="Conversation details" onClose={props.onClose}>
         {props.children}
+        {/* After the tabs, so the sheet still opens with the first tab focused. */}
+        {props.actions ? (
+          <div className="flex justify-end gap-1 border-t border-dashboard-border px-4 py-2">
+            {props.actions}
+          </div>
+        ) : null}
       </BottomSheet>
     );
   }
@@ -68,14 +88,22 @@ export function ConversationDetailsFrame(props: {
         }
       }}
     >
-      <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>
+      <header className="flex items-center justify-between gap-3 border-b border-dashboard-border py-2 pl-5 pr-3">
+        {/* Keep actions beside the title. The panel opens under the pointer
+            that clicked the chat's Details button, so that corner holds only
+            Close. */}
+        <div className="flex min-w-0 items-center gap-3">
+          <h2
+            aria-label="Conversation details"
+            className="m-0 text-base font-semibold text-dashboard-text"
+            id={titleId}
+          >
+            Details
+          </h2>
+          {props.actions ? (
+            <div className="flex items-center gap-0.5">{props.actions}</div>
+          ) : null}
+        </div>
         <Button
           ref={closeRef}
           aria-label="Close conversation details"

package/src/client/conversations/ConversationMeta.tsx

@@ -16,6 +16,8 @@ import type { ConversationDetailReport } from "@sentry/junior/api/schema";
 
 import {
   formatConversationDuration,
+  formatRelativeTime,
+  formatTime,
   slackLocationLabel,
   summarizeCost,
   summarizeModelUsage,
@@ -547,7 +549,13 @@ export function hasConversationStats(props: {
   return conversationStatItems(props).length > 0;
 }
 
-/** Render runtime, source, token, and cost metadata under the conversation title. */
+type ConversationStatItem = MetricListItem & { label: string };
+
+/**
+ * Render runtime, source, token, and cost metadata. The compact variant is one
+ * line under the conversation title. The full variant is a labeled list for
+ * conversation details.
+ */
 export function ConversationStats(props: {
   conversation: Conversation | undefined;
   detail?: ConversationDetailReport;
@@ -556,6 +564,24 @@ export function ConversationStats(props: {
   const stats = conversationStatItems(props);
   if (stats.length === 0) return null;
 
+  if ((props.variant ?? "full") === "full") {
+    return (
+      <dl className="m-0 grid min-w-0 gap-2 text-xs leading-snug">
+        {stats.map((item) => (
+          <div
+            className="flex min-w-0 items-baseline justify-between gap-4"
+            key={item.key}
+          >
+            <dt className="shrink-0 text-dashboard-text-muted">{item.label}</dt>
+            <dd className="m-0 min-w-0 break-words text-right tabular-nums text-dashboard-text">
+              {item.content}
+            </dd>
+          </div>
+        ))}
+      </dl>
+    );
+  }
+
   return (
     <MetricList
       className="break-words text-xs leading-[1.45] text-dashboard-text-muted"
@@ -568,7 +594,7 @@ function conversationStatItems(props: {
   conversation: Conversation | undefined;
   detail?: ConversationDetailReport;
   variant?: "compact" | "full";
-}): MetricListItem[] {
+}): ConversationStatItem[] {
   if (!props.conversation) return [];
   const variant = props.variant ?? "full";
   const completeDetail = props.detail?.previousCursor
@@ -590,17 +616,37 @@ function conversationStatItems(props: {
   const sourceTask = props.detail?.sourceTask;
   const childAgentTotals =
     props.detail?.childAgentTotals ?? props.conversation.childAgentTotals;
-  const rawStats: Array<MetricListItem | undefined> = [
+  const lastActivityAt = props.conversation.lastSeenAt;
+  const rawStats: Array<ConversationStatItem | undefined> = [
     location
       ? {
           content: <LocationLink label={location} locationUrl={locationUrl} />,
           key: "location",
+          label: "Location",
         }
       : undefined,
     variant === "full" && sourceTask
       ? {
           content: <SourceTask sourceTask={sourceTask} />,
           key: "source-task",
+          label: "Source",
+        }
+      : undefined,
+    variant === "full" && lastActivityAt
+      ? {
+          content: (
+            <time
+              dateTime={lastActivityAt}
+              title={formatTime(lastActivityAt, {
+                dateStyle: "medium",
+                timeStyle: "short",
+              })}
+            >
+              {formatRelativeTime(lastActivityAt)}
+            </time>
+          ),
+          key: "last-activity",
+          label: "Last activity",
         }
       : undefined,
     durationLabel !== "none"
@@ -615,6 +661,7 @@ function conversationStatItems(props: {
             />
           ),
           key: "duration",
+          label: "Runtime",
         }
       : undefined,
     tokenSummary
@@ -637,6 +684,7 @@ function conversationStatItems(props: {
             />
           ),
           key: "tokens",
+          label: "Tokens",
         }
       : undefined,
     costSummary ||
@@ -659,14 +707,18 @@ function conversationStatItems(props: {
             />
           ),
           key: "cost",
+          label: "Cost",
         }
       : undefined,
     childAgentTotals
       ? {
           content: <SubagentsMetric childAgentTotals={childAgentTotals} />,
           key: "subagents",
+          label: "Subagents",
         }
       : undefined,
   ];
-  return rawStats.filter((item): item is MetricListItem => item !== undefined);
+  return rawStats.filter(
+    (item): item is ConversationStatItem => item !== undefined,
+  );
 }

package/src/client/conversations/ConversationPage.tsx

@@ -27,6 +27,7 @@ import {
 import { ConversationComposer } from "./ConversationComposer";
 import { ConversationHeader } from "./ConversationHeader";
 import { ConversationDetails } from "./ConversationDetails";
+import { useConversationDetailsDefaultOpen } from "./ConversationDetailsFrame";
 import { cn } from "../styles";
 import { ConversationForkLinks } from "./ConversationForkLinks";
 import { ConversationAgentTree } from "./ConversationAgentTree";
@@ -39,7 +40,10 @@ import {
   hasConversationStats,
   PendingAuthorization,
 } from "./ConversationMeta";
-import { ConversationUsageBreakdown } from "./ConversationUsageBreakdown";
+import {
+  ConversationUsageBreakdown,
+  hasConversationUsageBreakdown,
+} from "./ConversationUsageBreakdown";
 import { PendingMailboxStack } from "./PendingMailboxStack";
 import {
   buildConversations,
@@ -78,7 +82,11 @@ export function ConversationPage(props: {
   onRead?(conversationId: string, lastReadAt: string): void;
   pendingArchiveUpdate?: PendingArchiveConversationUpdate;
 }) {
-  const [detailsOpen, setDetailsOpen] = useState(false);
+  // Large viewports show details beside the chat until the reader closes
+  // them. Smaller viewports open details only on request.
+  const detailsDefaultOpen = useConversationDetailsDefaultOpen();
+  const [detailsChoice, setDetailsChoice] = useState<boolean>();
+  const detailsOpen = detailsChoice ?? detailsDefaultOpen;
   const [subagentTarget, setSubagentTarget] =
     useState<SubagentTranscriptTarget>();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -217,7 +225,7 @@ export function ConversationPage(props: {
               }
               conversationId={conversationId}
               detailsOpen={detailsOpen}
-              onDetailsClick={() => setDetailsOpen((open) => !open)}
+              onDetailsClick={() => setDetailsChoice(!detailsOpen)}
               forks={
                 detail.data?.forkedFromConversationId ||
                 detail.data?.forks?.length ? (
@@ -362,9 +370,8 @@ export function ConversationPage(props: {
         <ConversationDetails
           conversationId={conversationId}
           identity={identity}
-          lastActivityAt={conversation?.lastSeenAt}
           sentryConversationUrl={detail.data?.sentryConversationUrl}
-          onClose={() => setDetailsOpen(false)}
+          onClose={() => setDetailsChoice(false)}
           onOpenSubagent={setSubagentTarget}
           annotations={
             hasConversationAnnotations(detail.data?.annotations) ? (
@@ -376,21 +383,26 @@ export function ConversationPage(props: {
               <ConversationBrief brief={detail.data.brief} variant="summary" />
             ) : null
           }
-          stats={
+          overview={
             hasConversationStats({
               conversation,
               detail: detail.data,
             }) ? (
-              <div className="grid min-w-0 gap-5">
-                <ConversationStats
-                  conversation={conversation}
-                  detail={detail.data}
-                />
-                <ConversationUsageBreakdown
-                  conversation={conversation}
-                  detail={detail.data}
-                />
-              </div>
+              <ConversationStats
+                conversation={conversation}
+                detail={detail.data}
+              />
+            ) : null
+          }
+          usage={
+            hasConversationUsageBreakdown({
+              conversation,
+              detail: detail.data,
+            }) ? (
+              <ConversationUsageBreakdown
+                conversation={conversation}
+                detail={detail.data}
+              />
             ) : null
           }
         />

package/src/client/conversations/ConversationUsageBreakdown.tsx

@@ -167,6 +167,19 @@ function BreakdownTable(props: {
   );
 }
 
+/** True when the Conversation has model or auxiliary usage to break down. */
+export function hasConversationUsageBreakdown(props: {
+  conversation: Conversation | undefined;
+  detail?: ConversationDetailReport;
+}): boolean {
+  if (!props.conversation) return false;
+  const auxiliaryCosts =
+    props.detail?.auxiliaryCosts ?? props.conversation.auxiliaryCosts;
+  return Boolean(
+    props.detail?.modelUsage?.length || auxiliaryCosts?.operations?.length,
+  );
+}
+
 /**
  * Break a Conversation's usage down by agent, model, and auxiliary
  * operation. The header tooltips show only the largest items; this lists
@@ -177,7 +190,9 @@ export function ConversationUsageBreakdown(props: {
   conversation: Conversation | undefined;
   detail?: ConversationDetailReport;
 }) {
-  if (!props.conversation) return null;
+  if (!hasConversationUsageBreakdown(props) || !props.conversation) {
+    return null;
+  }
   const modelUsage = props.detail?.modelUsage ?? [];
   const auxiliaryCosts =
     props.detail?.auxiliaryCosts ?? props.conversation.auxiliaryCosts;
@@ -193,8 +208,6 @@ export function ConversationUsageBreakdown(props: {
   const operations = [...(auxiliaryCosts?.operations ?? [])].sort(
     (a, b) => b.costUsd - a.costUsd,
   );
-  if (!modelUsage.length && !operations.length) return null;
-
   const formatCost = costFormatter(cost ?? 0);
   const formatTokens = (value: number | undefined) =>
     value === undefined ? NOT_RECORDED : formatCompactNumber(value);

package/src/client/conversations/README.md

@@ -57,9 +57,10 @@ dismissal.
 
 `ConversationDetails` owns one set of tabs and content. `ConversationDetailsFrame`
 uses a 400px aside at 1280px and above. The chat and aside scroll separately.
-Smaller windows use `BottomSheet` with a plain accessible label. The sheet and
-side drawers share the Base UI `Sheet` focus rules and the app's document
-scroll lock. A resize changes the frame and keeps the selected tab. Tabs stay fixed above the scrolling content in both
-layouts. Only the swipe handle sits above the sheet tabs. Swipe down, tap the
-backdrop, or press Escape to dismiss it. Base UI owns the transition lifecycle.
+Smaller windows use `BottomSheet` with a visible title and close control. The sheet and
+side drawers use the shadcn Base UI `Sheet` and share the app's document
+scroll lock. A resize changes the frame and keeps the selected tab. Tabs stay
+fixed above the scrolling content in both layouts. The sheet title and close control sit above the tabs. Use the close
+control, tap the backdrop, or press Escape to dismiss it. Base UI owns the
+transition lifecycle.
 A pending exit cannot close a new panel or a different Conversation.

package/src/client/conversations/ShareConversationButton.tsx

@@ -3,12 +3,13 @@ import { useHref } from "react-router";
 import { Check, Share2 } from "lucide-react";
 
 import { Button } from "../components/Button";
+import { IconButtonTooltip } from "../components/Tooltip";
 import { conversationPath } from "./conversationRoutes";
 
 /** Share a conversation link without changing who can access it. */
 export function ShareConversationButton(props: {
   conversationId: string;
-  layout?: "button" | "menu";
+  layout?: "button" | "icon" | "menu";
 }) {
   const href = useHref(conversationPath(props.conversationId));
   const [status, setStatus] = useState<
@@ -70,7 +71,19 @@ export function ShareConversationButton(props: {
     </>
   );
   const button =
-    props.layout === "menu" ? (
+    props.layout === "icon" ? (
+      <IconButtonTooltip label={label} placement="below">
+        <Button
+          aria-label={label}
+          className="text-dashboard-text-muted"
+          disabled={status === "sharing"}
+          onClick={() => void shareLink()}
+          size="icon"
+        >
+          <Icon aria-hidden="true" size={15} />
+        </Button>
+      </IconButtonTooltip>
+    ) : props.layout === "menu" ? (
       <button
         aria-label={label}
         className="flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-sm font-semibold text-dashboard-text transition-colors hover:bg-dashboard-fill-hover focus-visible:bg-dashboard-fill-hover focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"

package/src/client/conversations/TranscriptSubagentView.tsx

@@ -8,9 +8,9 @@ import { subagentStatusTone } from "./ConversationChildAgents";
 import { HighlightText } from "./transcriptSearch";
 
 /**
- * Render a child agent as a compact card in the transcript stream. The card
- * matches the child agent rows in conversation details: name, status, and run
- * time first, then the task title. It opens the child transcript.
+ * Render a child agent as a compact card in the transcript stream: name,
+ * status, and run time first, then the task title. It opens the child
+ * transcript.
  */
 export function TranscriptSubagentView(props: {
   onOpenTranscript?: (part: TranscriptViewSubagentPart) => void;

package/src/client/lib/utils.ts

@@ -0,0 +1 @@
+export { cn } from "cn";

package/src/client/pages/dev/ComponentsPage.tsx

@@ -313,7 +313,7 @@ function FoundationsGalleryPage() {
             onClose={() => setSheetOpen(false)}
           >
             <p className="m-0 p-4 pb-[max(1rem,env(safe-area-inset-bottom))] text-sm text-dashboard-text-muted">
-              Swipe the handle down, tap outside, or press Escape to return to
+              Use the close button, tap outside, or press Escape to return to
               the page.
             </p>
           </BottomSheet>