fix(ui): align global search dialog composition

design-system/apps/design-lab/src/pages/PatternsPage.tsx

@@ -23,6 +23,8 @@ import {
   NavigationPanelSection,
   PageHeader,
   SearchField,
+  ScrollArea,
+  TabGroup,
   SegmentedControl,
   Select,
   StatusPill,
@@ -156,19 +158,21 @@ export function PatternsPage({ colorScheme, contrast, density, tokenOverrides }:
         </PatternSection>
 
         <PatternSection description={t("patterns.search.description")} index="03" title={t("patterns.search.title")}>
-          <Card appearance="raised" className="pattern-command" data-openbitfun-pattern="search-command-surface" gap="md" padding="md" radius="md">
-            <CardHeader actions={<SegmentedControl size="md" onValueChange={setScope} options={[{ label: t("patterns.search.all"), value: "all" }, { label: t("patterns.search.files"), value: "files" }, { label: t("patterns.search.commands"), value: "commands" }]} value={scope} />} description={t("patterns.search.description")} title={t("patterns.search.title")} />
-            <SearchField aria-label={t("patterns.search.searchPlaceholder")} clearLabel={t("components.preview.close")} leadingIcon={<Icon name="search" />} onClear={() => setQuery("")} onValueChange={setQuery} placeholder={t("patterns.search.searchPlaceholder")} shortcut={<KeyHint>Ctrl K</KeyHint>} value={query} />
-            <CardBody>
+          <Card appearance="raised" className="pattern-command" data-openbitfun-pattern="search-command-surface" gap="lg" padding="md" radius="lg">
+            <div className="pattern-command-header">
+              <div className="pattern-command-query"><SearchField size="sm" aria-label={t("patterns.search.searchPlaceholder")} clearLabel={t("components.preview.close")} leadingIcon={<Icon name="search" />} onClear={() => setQuery("")} onValueChange={setQuery} placeholder={t("patterns.search.searchPlaceholder")} shortcut={<KeyHint>Ctrl K</KeyHint>} value={query} /></div>
+              <TabGroup size="sm" onValueChange={setScope} items={[{ label: t("patterns.search.all"), value: "all" }, { label: t("patterns.search.files"), value: "files" }, { label: t("patterns.search.commands"), value: "commands" }]} value={scope} />
+            </div>
+            <ScrollArea className="pattern-command-results">
               <div className="pattern-action-grid">
-                {visibleActions.map((action) => <ActionCard description={t(action.description)} key={action.title} leading={<Icon name={action.icon} />} size="md">{t(action.title)}</ActionCard>)}
+                {scope !== "files" && visibleActions.map((action) => <ActionCard description={t(action.description)} key={action.title} leading={<Icon name={action.icon} />} size="md">{t(action.title)}</ActionCard>)}
               </div>
-              <div className="pattern-recent-list">
+              {scope !== "commands" && <div className="pattern-recent-list">
                 <strong>{t("patterns.search.recent")}</strong>
                 <ActivityItem actions={[{ icon: <Icon name="arrow-up-right" />, id: "open-readme", label: t("patterns.actions.openFiles") }]} appearance="surface" label="README.md" leading={<Icon name="files" />}>design-system/README.md</ActivityItem>
                 <ActivityItem actions={[{ icon: <Icon name="arrow-up-right" />, id: "open-package", label: t("patterns.actions.openFiles") }]} appearance="surface" label="package.json" leading={<Icon name="files" />}>design-system/packages/ui/package.json</ActivityItem>
-              </div>
-            </CardBody>
+              </div>}
+            </ScrollArea>
           </Card>
         </PatternSection>
 

design-system/apps/design-lab/src/styles.css

@@ -2917,16 +2917,30 @@ body,
 }
 
 .pattern-command {
-  max-inline-size: 900px;
+  inline-size: min(100%, var(--openbitfun-layout-search-dialog-width));
+  block-size: min(var(--openbitfun-layout-search-dialog-height), calc(100dvh - 2 * var(--openbitfun-overlay-dialog-viewport-gutter)));
+  min-block-size: 0;
+  padding: var(--openbitfun-layout-search-dialog-padding);
 }
 
-.pattern-command > [data-openbitfun-component="search-field"] {
+.pattern-command-header {
+  display: grid;
+  flex: 0 0 auto;
+  min-inline-size: 0;
+  gap: var(--openbitfun-layout-search-dialog-scope-gap);
+}
+
+.pattern-command-query {
+  --openbitfun-control-height-sm: var(--openbitfun-layout-search-dialog-query-height);
+}
+
+.pattern-command-query > [data-openbitfun-component="search-field"] {
   inline-size: 100%;
 }
 
-.pattern-command [data-openbitfun-part="body"] {
-  display: grid;
-  gap: var(--openbitfun-space-6);
+.pattern-command-results {
+  flex: 1 1 auto;
+  min-block-size: 0;
 }
 
 .pattern-action-grid {

design-system/packages/design-tokens/README.md

@@ -64,3 +64,8 @@ its established role. `type.overline.*` owns extra-small uppercase annotations;
 these modifiers keep product styles semantic without changing their resolved
 metrics during migration. `type.modifier.leading.support` provides the compact
 1.45 supporting-text rhythm used when an 11px role must align to a 16px line.
+
+`layout.searchDialog` owns the shared Lab/product search composition: 800 × 460
+when space permits, 20px inset and query-to-scope gap, and a 30px query row.
+Only the query shell scopes `control.height.sm`; general Input and Button sizes
+retain their defaults. Results scroll within the available viewport.

design-system/packages/design-tokens/src/system.tokens.json

@@ -678,6 +678,14 @@
   },
   "layout": {
     "$type": "dimension",
+    "searchDialog": {
+      "width": { "$value": "{overlay.dialog.maxInlineSizeXlarge}" },
+      "height": { "$value": "460px" },
+      "padding": { "$value": "{space.5}" },
+      "queryHeight": { "$value": "30px" },
+      "scopeGap": { "$value": "{space.5}" },
+      "resultsGap": { "$value": "30px" }
+    },
     "overflowText": {
       "fadeExtent": { "$value": "{space.4}" }
     },

src/apps/data-migrator/ui/generated/design-system.css

@@ -261,6 +261,12 @@
     --openbitfun-layout-navigation-panel-section-gap: var(--openbitfun-space-1);
     --openbitfun-layout-navigation-panel-surface-padding: var(--openbitfun-space-2);
     --openbitfun-layout-overflow-text-fade-extent: var(--openbitfun-space-4);
+    --openbitfun-layout-search-dialog-height: 460px;
+    --openbitfun-layout-search-dialog-padding: var(--openbitfun-space-5);
+    --openbitfun-layout-search-dialog-query-height: 30px;
+    --openbitfun-layout-search-dialog-results-gap: 30px;
+    --openbitfun-layout-search-dialog-scope-gap: var(--openbitfun-space-5);
+    --openbitfun-layout-search-dialog-width: var(--openbitfun-overlay-dialog-max-inline-size-xlarge);
     --openbitfun-layout-spinner-matrix-cell-lg: 8px;
     --openbitfun-layout-spinner-matrix-cell-md: 6px;
     --openbitfun-layout-spinner-matrix-cell-sm: 4px;