diff --git a/src/components/medications/sections/api-tokens-row.tsx b/src/components/medications/sections/api-tokens-row.tsx index 9d1e9417d..414884374 100644 --- a/src/components/medications/sections/api-tokens-row.tsx +++ b/src/components/medications/sections/api-tokens-row.tsx @@ -19,7 +19,7 @@ import { useEffect, useState } from "react"; import { useQuery, useQueryClient } from "@tanstack/react-query"; import { toast } from "sonner"; -import { Copy, KeyRound } from "lucide-react"; +import { ChevronDown, ChevronUp, Copy, KeyRound } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Label } from "@/components/ui/label"; @@ -58,6 +58,11 @@ export function ApiTokensRow({ const [mintedToken, setMintedToken] = useState(null); const [busy, setBusy] = useState(false); const [exampleType, setExampleType] = useState("curl"); + // The request examples are the tallest, lowest-frequency content in + // the sheet — collapsed by default so the verbose `
` snippets stay
+  // out of the default viewport (and the live-interpolated bearer token
+  // stays out of the default-visible DOM until the user opts in).
+  const [examplesOpen, setExamplesOpen] = useState(false);
 
   // v1.5.5 F-1 H-2 — single source of truth for the per-medication
   // api-endpoint key. The earlier inline `useMemo` minted the same
@@ -198,8 +203,12 @@ export function ApiTokensRow({
       

{t("medications.detail.api.caption", { name: medicationName })}

+ {/* The raw endpoint URL is redundant with the copy button below, so + it is rendered muted + single-line-truncated rather than as a + full-width block — the long absolute URL was pure visual noise. */} POST {endpoint} @@ -259,43 +268,69 @@ export function ApiTokensRow({ {/* v1.6.0 — multi-language request snippets (restored from the v1.5.4 endpoint dialog). The minted token is interpolated - live; until then the snippet carries a `YOUR_TOKEN` stand-in. */} -
-
-
);