fix(ui): mobile hero search centering, touch targets, and portal hardening

docs/site-map.md

@@ -5,7 +5,7 @@ This file is generated by `npm run sitemap:update`. Run `npm run sitemap:check`
 ## Main product pages
 
 - `/` - Main Clinical KB shell. Source: `src/app/page.tsx`.
-- `/applications` - Application and tool launcher. Source: `src/app/applications/page.tsx`.
+- `/applications` - Route discovered from app directory Source: `src/app/applications/page.tsx`.
 - `/differentials` - Differentials home and search surface. Source: `src/app/differentials/page.tsx`.
 - `/differentials/diagnoses` - Diagnosis stream. Source: `src/app/differentials/diagnoses/page.tsx`.
 - `/differentials/presentations` - Presentation workflow stream. Source: `src/app/differentials/presentations/page.tsx`.
@@ -40,7 +40,7 @@ This file is generated by `npm run sitemap:update`. Run `npm run sitemap:check`
 | Favourites    | `/favourites`        | `/favourites?q=clozapine+set&focus=1&run=1`                           | Saved set and saved item detail render inside the favourites page surface.                                                                       |
 | Differentials | `/differentials`     | `/differentials?q=acute+confusion&focus=1&run=1`                      | `/differentials/diagnoses`, `/differentials/diagnoses/[slug]`, and `/differentials/presentations`.                                               |
 | Medication    | `/?mode=prescribing` | `/?mode=prescribing&q=acamprosate+renal+dose&focus=1&run=1`           | `/medications/[slug]`; `/medications` redirects to medication mode.                                                                              |
-| Tools         | `/?mode=tools`       | `/?mode=tools&q=medications&focus=1&run=1`                            | `/applications` launcher and tool detail panels inside tools mode.                                                                               |
+| Tools         | `/?mode=tools`       | `/?mode=tools&q=medications&focus=1&run=1`                            | Tool launcher and detail panels inside dashboard tools mode (`/?mode=tools`).                                                                    |
 
 ## Documents flow index
 
@@ -601,5 +601,5 @@ This file is generated by `npm run sitemap:update`. Run `npm run sitemap:check`
 | Differentials                  | `src/app/differentials, src/lib/differentials.ts`                                             |
 | Medications                    | `src/app/medications, src/components/clinical-dashboard/medication-prescribing-workspace.tsx` |
 | Documents                      | `src/app/documents, src/lib/document-flow-routes.ts`                                          |
-| Applications and tools         | `src/app/applications, src/components/applications-launcher-page.tsx`                         |
+| Tools                          | `src/components/applications-launcher-page.tsx`                                               |
 | Mockups                        | `src/app/mockups`                                                                             |

scripts/generate-site-map.ts

@@ -40,7 +40,6 @@ type SiteMapData = {
 
 const routeDescriptions: Record<string, string> = {
   "/": "Main Clinical KB shell.",
-  "/applications": "Application and tool launcher.",
   "/differentials": "Differentials home and search surface.",
   "/differentials/diagnoses": "Diagnosis stream.",
   "/differentials/diagnoses/[slug]": "Differential diagnosis detail.",
@@ -97,7 +96,7 @@ const routeOwnershipRows = [
   ["Differentials", "src/app/differentials, src/lib/differentials.ts"],
   ["Medications", "src/app/medications, src/components/clinical-dashboard/medication-prescribing-workspace.tsx"],
   ["Documents", "src/app/documents, src/lib/document-flow-routes.ts"],
-  ["Applications and tools", "src/app/applications, src/components/applications-launcher-page.tsx"],
+  ["Tools", "src/components/applications-launcher-page.tsx"],
   ["Mockups", "src/app/mockups"],
 ] as const;
 
@@ -279,7 +278,7 @@ function renderModePageIndex() {
       mode: "Tools",
       home: appModeHomeHref("tools"),
       search: appModeHomeHref("tools", { query: "medications", focus: true, run: true }),
-      detail: "`/applications` launcher and tool detail panels inside tools mode.",
+      detail: "Tool launcher and detail panels inside dashboard tools mode (`/?mode=tools`).",
     },
   ]);
 }

src/app/globals.css

@@ -1101,14 +1101,14 @@ summary::-webkit-details-marker {
 
   .answer-footer-search-action,
   .answer-footer-search-send {
-    height: 2.05rem;
-    width: 2.05rem;
+    height: 2.75rem;
+    width: 2.75rem;
   }
 
   .answer-footer-search-action svg,
   .answer-footer-search-send svg {
-    height: 1rem;
-    width: 1rem;
+    height: 1.1rem;
+    width: 1.1rem;
   }
 }
 
@@ -1172,14 +1172,16 @@ summary::-webkit-details-marker {
 @media (max-width: 430px) {
   .answer-footer-search-action,
   .answer-footer-search-send {
-    height: 2.05rem !important;
-    width: 2.05rem !important;
+    height: 2.75rem !important;
+    width: 2.75rem !important;
+    min-height: 2.75rem;
+    min-width: 2.75rem;
   }
 
   .answer-footer-search-action svg,
   .answer-footer-search-send svg {
-    height: 1rem;
-    width: 1rem;
+    height: 1.1rem;
+    width: 1.1rem;
   }
 }
 

src/components/ClinicalDashboard.tsx

@@ -1046,26 +1046,8 @@
   );
 }
 
-function ToolsHub({
-  query,
-  onQueryChange,
-  desktopComposerSlotId,
-  showDetailPanel,
-}: {
-  query: string;
-  onQueryChange: (nextQuery: string) => void;
-  desktopComposerSlotId?: string;
-  showDetailPanel?: boolean;
-}) {
-  return (
-    <ApplicationsLauncherWorkspace
-      variant="dashboard-tools"
-      query={query}
-      onQueryChange={onQueryChange}
-      desktopComposerSlotId={desktopComposerSlotId}
-      showDetailPanel={showDetailPanel}
-    />
-  );
+function ToolsHub({ query, desktopComposerSlotId }: { query: string; desktopComposerSlotId?: string }) {
+  return <ApplicationsLauncherWorkspace query={query} desktopComposerSlotId={desktopComposerSlotId} />;
 }
 
 type MobileSectionFabItem = {
@@ -1566,7 +1548,7 @@
   const activeModeSearch = appModeSearchConfig(searchMode);
   const activeModeResultKind = appModeResultKind(searchMode);
   const requestQueryMode = appModeQueryMode(searchMode, queryMode);
-  const requestedRun = searchParams.get("run") === "1";
+
   // Record matches come from the owner-scoped registry API (mock fixtures in
   // demo mode); ranking stays client-side so live-typing behaviour is
   // unchanged and the registry is fetched once per active mode.
@@ -2460,8 +2442,7 @@
     urlDocumentSearchBootstrappedRef.current = true;
     void executeSearch(searchText, mode, scopeFilters);
     // URL search intentionally runs once when the selected mode can execute.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [canRunSearch, answerThreadBootstrapped]);
 
   useEffect(() => {
     const updateHash = () => {
@@ -3190,7 +3171,7 @@
     });
   }
 
   function stageAnswerFollowUpDraft(draft: string) {
     setQuery(draft);
     focusComposerInput();
   }
@@ -3954,12 +3935,7 @@
                     }}
                   />
                 ) : activeModeResultKind === "tools" ? (
-                  <ToolsHub
-                    query={query}
-                    onQueryChange={setQuery}
-                    desktopComposerSlotId={desktopHomeComposerSlotId}
-                    showDetailPanel={!requestedRun}
-                  />
+                  <ToolsHub query={query} desktopComposerSlotId={desktopHomeComposerSlotId} />
                 ) : activeModeResultKind === "favourites" ? (
                   <FavouritesHub
                     query={query}

src/components/applications-launcher-page.tsx

@@ -26,10 +26,8 @@ import { type FormEvent, useEffect, useMemo, useState } from "react";
 
 import { ModeHomeVerificationFooter } from "@/components/mode-home-template";
 import { cn } from "@/components/ui-primitives";
-
 type LauncherStatus = "ready" | "recent" | "review_due";
 type LauncherArea = "assessment" | "reference" | "care" | "coordination" | "saved";
-type LauncherVariant = "standalone" | "dashboard-tools";
 type LauncherFilter = "all" | LauncherArea | "more";
 
 type LauncherApp = {
@@ -54,19 +52,6 @@ type LauncherApp = {
   output: string;
 };
 
-type LauncherCopy = {
-  heading: string;
-  description: string;
-  searchAriaLabel: string;
-  searchPlaceholder: string;
-  openSelectedAriaLabel: string;
-  allSectionLabel: string;
-  allColumnLabel: string;
-  countNoun: string;
-  emptyTitle: string;
-  emptyBody: string;
-};
-
 const focusRing =
   "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]";
 
@@ -311,32 +296,17 @@ const launcherApps: LauncherApp[] = [
   },
 ];
 
-const standaloneLauncherCopy: LauncherCopy = {
-  heading: "Applications",
-  description:
-    "Open the clinical applications and connected workflows you use for assessment, prescribing, documents, and saved work.",
-  searchAriaLabel: "Search applications",
-  searchPlaceholder: "Search applications...",
-  openSelectedAriaLabel: "Open selected application",
-  allSectionLabel: "All applications",
-  allColumnLabel: "Application",
-  countNoun: "applications",
-  emptyTitle: "No applications match",
-  emptyBody: "Clear the search or try another clinical workflow, app name, or category.",
-};
-
-const dashboardToolsLauncherCopy: LauncherCopy = {
+const toolsLauncherCopy = {
   heading: "Tools",
   description:
     "Open the clinical tools and connected workflows you use for assessment, prescribing, documents, and saved work.",
-  searchAriaLabel: "Search tools",
-  searchPlaceholder: "Search tools...",
-  openSelectedAriaLabel: "Open selected tool",
   allSectionLabel: "All tools",
-  allColumnLabel: "Tool",
   countNoun: "tools",
   emptyTitle: "No tools match",
   emptyBody: "Clear the search or try another clinical workflow, tool name, or category.",
+  searchAriaLabel: "Search tools",
+  searchPlaceholder: "Search tools...",
+  openSelectedAriaLabel: "Open selected tool",
 };
 
 const quickActions = [
@@ -430,20 +400,6 @@ function StatusChip({ label, tone = "neutral" }: { label: string; tone?: "neutra
   );
 }
 
-function ToolChips({ app, includeStatus = false }: { app: LauncherApp; includeStatus?: boolean }) {
-  return (
-    <span className="flex flex-wrap items-center gap-1.5">
-      {includeStatus ? <StatusChip label={statusLabels[app.status]} /> : null}
-      {app.sourceBacked ? <StatusChip label="Source-backed" tone="source" /> : <StatusChip label="Private" />}
-      {app.safetyFirst ? (
-        <StatusChip label="Safety-first" tone="safety" />
-      ) : app.highYield ? (
-        <StatusChip label="High yield" tone="high" />
-      ) : null}
-    </span>
-  );
-}
-
 function ToolSearch({
   value,
   onChange,
@@ -454,7 +410,7 @@ function ToolSearch({
   value: string;
   onChange: (query: string) => void;
   onSubmit: () => void;
-  copy: LauncherCopy;
+  copy: typeof toolsLauncherCopy;
   className?: string;
 }) {
   return (
@@ -496,6 +452,20 @@ function ToolSearch({
   );
 }
 
+function ToolChips({ app, includeStatus = false }: { app: LauncherApp; includeStatus?: boolean }) {
+  return (
+    <span className="flex flex-wrap items-center gap-1.5">
+      {includeStatus ? <StatusChip label={statusLabels[app.status]} /> : null}
+      {app.sourceBacked ? <StatusChip label="Source-backed" tone="source" /> : <StatusChip label="Private" />}
+      {app.safetyFirst ? (
+        <StatusChip label="Safety-first" tone="safety" />
+      ) : app.highYield ? (
+        <StatusChip label="High yield" tone="high" />
+      ) : null}
+    </span>
+  );
+}
+
 function QuickActions({ onSelect, mobile }: { onSelect: (id: string) => void; mobile?: boolean }) {
   return (
     <section
@@ -888,34 +858,27 @@ function DetailDialog({ app, open, onClose }: { app: LauncherApp; open: boolean;
 }
 
 type ApplicationsLauncherWorkspaceProps = {
-  variant?: LauncherVariant;
   query?: string;
-  onQueryChange?: (query: string) => void;
   desktopComposerSlotId?: string;
-  showDetailPanel?: boolean;
   className?: string;
 };
 
 export function ApplicationsLauncherWorkspace({
-  variant = "standalone",
   query: controlledQuery,
-  onQueryChange,
   desktopComposerSlotId,
-  showDetailPanel,
   className,
 }: ApplicationsLauncherWorkspaceProps) {
-  const [uncontrolledQuery, setUncontrolledQuery] = useState("");
+  const [localQuery, setLocalQuery] = useState("");
   const [activeFilter, setActiveFilter] = useState<LauncherFilter>("all");
-  const isDashboardTools = variant === "dashboard-tools";
-  const [detailOpen, setDetailOpen] = useState(!isDashboardTools && showDetailPanel === true);
-  const copy = isDashboardTools ? dashboardToolsLauncherCopy : standaloneLauncherCopy;
-  const query = controlledQuery ?? uncontrolledQuery;
+  const [detailOpen, setDetailOpen] = useState(false);
+  const copy = toolsLauncherCopy;
+  const query = controlledQuery ?? localQuery;
   const normalizedQuery = query.trim().toLowerCase();
   const queryDerivedId = useMemo(() => initialToolId(query), [query]);
-  const [selection, setSelection] = useState(() => ({
-    queryKey: (controlledQuery ?? "").trim().toLowerCase(),
-    id: initialToolId(controlledQuery),
-  }));
+  const [selection, setSelection] = useState({
+    queryKey: normalizedQuery,
+    id: initialToolId(query),
+  });
   const selectedId = selection.queryKey === normalizedQuery ? selection.id : queryDerivedId;
 
   const filteredApps = useMemo(() => {
@@ -941,8 +904,7 @@ export function ApplicationsLauncherWorkspace({
   const selectedApp = appById(effectiveSelectedId);
 
   function updateQuery(nextQuery: string) {
-    if (controlledQuery === undefined) setUncontrolledQuery(nextQuery);
-    onQueryChange?.(nextQuery);
+    if (controlledQuery === undefined) setLocalQuery(nextQuery);
   }
 
   function openTool(id: string) {
@@ -956,26 +918,26 @@ export function ApplicationsLauncherWorkspace({
 
   return (
     <main
-      data-testid={isDashboardTools ? "tools-hub" : "applications-launcher"}
-      aria-labelledby={isDashboardTools ? "tools-home-heading" : "applications-launcher-heading"}
+      data-testid="tools-hub"
+      aria-labelledby="tools-home-heading"
       className={cn(
         "mx-auto w-full max-w-[90rem] overflow-x-hidden px-4 pb-8 text-[color:var(--text)] sm:px-6 lg:px-8",
         "pb-[calc(12rem+env(safe-area-inset-bottom))] sm:pb-8",
-        isDashboardTools ? "pt-7 sm:pt-10 lg:pt-14" : "pt-8 sm:pt-10",
+        "pt-7 sm:pt-10 lg:pt-14",
         className,
       )}
     >
       <section
-        aria-label={isDashboardTools ? "Tools home" : "Applications home"}
-        data-testid={isDashboardTools ? "tools-home" : "applications-home"}
+        aria-label="Tools home"
+        data-testid="tools-home"
         className="mx-auto grid max-w-5xl justify-items-center gap-5 text-center sm:gap-6"
       >
         <span className="grid h-14 w-14 place-items-center rounded-2xl border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)] sm:h-16 sm:w-16">
           <Grid2X2 className="h-7 w-7 sm:h-8 sm:w-8" aria-hidden />
         </span>
         <div className="grid gap-2">
           <h1
-            id={isDashboardTools ? "tools-home-heading" : "applications-launcher-heading"}
+            id="tools-home-heading"
             className="text-balance text-[2rem] font-extrabold leading-none tracking-normal text-[color:var(--text-heading)] sm:text-[2.7rem]"
           >
             {copy.heading}
@@ -1000,7 +962,7 @@ export function ApplicationsLauncherWorkspace({
           />
         )}
 
-        <div className="w-full max-w-6xl" data-testid={isDashboardTools ? "tools-shortcuts" : "application-shortcuts"}>
+        <div className="w-full max-w-6xl" data-testid="tools-shortcuts">
           <div className="hidden sm:block">
             <QuickActions onSelect={openTool} />
           </div>
@@ -1012,7 +974,7 @@ export function ApplicationsLauncherWorkspace({
 
       <section
         aria-label={copy.allSectionLabel}
-        data-testid={isDashboardTools ? "tools-all-tools" : "applications-all-applications"}
+        data-testid="tools-all-tools"
         className="mx-auto mt-8 grid max-w-[86rem] gap-4 sm:mt-10"
       >
         <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
@@ -1055,15 +1017,13 @@ export function ApplicationsLauncherWorkspace({
         </p>
       </section>
 
-      {isDashboardTools ? (
-        <ModeHomeVerificationFooter icon={ShieldCheck} label="Clinical tools" body="Source-backed workflows" />
-      ) : null}
+      <ModeHomeVerificationFooter icon={ShieldCheck} label="Clinical tools" body="Source-backed workflows" />
 
       <DetailDialog app={selectedApp} open={detailOpen} onClose={() => setDetailOpen(false)} />
     </main>
   );
 }
 
 export function ApplicationsLauncherPage() {
-  return <ApplicationsLauncherWorkspace variant="standalone" />;
+  return <ApplicationsLauncherWorkspace />;
 }