style(web): toolbar searches at the toolbar size, page gaps through dashboardPage

apps/web/src/page/agent-sessions/list/view-toolbar.ts

@@ -15,11 +15,11 @@ type H = HtmlBuilder<Message>
 
 const ERRORS_LABEL_ID = "agent-sessions-errors-label"
 
-/** `ToolbarSearch` (debounced 300 ms), default size. */
+/** `ToolbarSearch` (debounced 300 ms), toolbar size. */
 const toolbarSearch = (h: H, model: Model): Html =>
 	searchInput(h, {
 		id: "agent-sessions-search",
-		size: "default",
+		size: "sm",
 		className: cn("max-w-sm", "w-full sm:max-w-sm"),
 		placeholder: "Session or trace ID…",
 		value: model.searchInput,

apps/web/src/page/agent-sessions/tools-kit/toolbar.ts

@@ -79,7 +79,7 @@ export type ToolbarConfig<M> = Readonly<{
 const nameSearchInput = <M>(h: HtmlBuilder<M>, search: NonNullable<ToolbarConfig<M>["nameSearch"]>): Html =>
 	searchInput(h, {
 		id: search.inputId,
-		size: "default",
+		size: "sm",
 		className: cn("max-w-sm", "w-full font-mono sm:w-64"),
 		placeholder: "Tool name…",
 		value: search.value,

apps/web/src/page/alerts/hub/view-rules.ts

@@ -267,11 +267,11 @@ export const rulesTab = (h: H, model: Model, inputs: RulesTabInputs): Html => {
 	)
 }
 
-/** `SearchInput size="default"`. */
+/** `SearchInput size="sm"`, the toolbar size. */
 const rulesSearch = (h: H, value: string): Html =>
 	searchInput(h, {
 		id: "alerts-rules-search",
-		size: "default",
+		size: "sm",
 		className: "w-full max-w-xs",
 		placeholder: "Search rules, services, tags…",
 		value,

apps/web/src/page/analytics/view.ts

@@ -184,7 +184,7 @@ export const view = Submodel.defineView<Model, Message, PageViewInputs>((model,
 				h,
 				{
 					title: "Web Analytics",
-					scrollClassName: "gap-6",
+					gap: "lg",
 					filters: filtersRail(h, model),
 					actions: h.div(
 						[h.Class("flex flex-wrap items-center gap-2")],

apps/web/src/page/code-review/kit/layout.ts

@@ -100,7 +100,8 @@ export const codeReviewLayout = <M>(options: LayoutOptions<M>, children: Readonl
 			title: "Code Review",
 			actions: options.toolbar,
 			tabs: tabs(options),
-			scrollClassName: "gap-6 pb-8",
+			gap: "lg",
+			scrollClassName: "pb-8",
 		},
 		options.filters === undefined || options.filters.length === 0
 			? children

apps/web/src/page/dashboards/kit/list-parts.ts

@@ -32,7 +32,7 @@ export const listSectionHeader = <M>(
 		],
 	)
 
-/** `ToolbarSearch` (`SearchInput` at the default size): the clear button empties the draft. */
+/** `ToolbarSearch` (`SearchInput` at the toolbar size, sm): the clear button empties the draft. */
 export const toolbarSearch = <M>(
 	h: HtmlBuilder<M>,
 	options: Readonly<{
@@ -45,7 +45,7 @@ export const toolbarSearch = <M>(
 ): Html =>
 	searchInput(h, {
 		id: options.id,
-		size: "default",
+		size: "sm",
 		className: cn("max-w-sm", options.className),
 		placeholder: options.placeholder,
 		value: options.draft,

apps/web/src/page/dashboards/list/view-list.ts

@@ -57,7 +57,9 @@ const tagFilter = (h: H, model: Model, allTags: ReadonlyArray<string>): Html =>
 	allTags.length === 0
 		? disabledReason(
 				h,
-				button(h, { variant: "outline", className: "shrink-0", isDisabled: true }, ["Tags"]),
+				button(h, { variant: "outline", size: "sm", className: "shrink-0", isDisabled: true }, [
+					"Tags",
+				]),
 			)
 		: h.submodel({
 				slotId: "dashboards-tag-filter",
@@ -92,9 +94,11 @@ const sortMenu = (h: H, model: Model): Html => {
 				h.div(
 					[h.Class("contents")],
 					withTrigger(
-						button(h, { variant: "outline", className: "shrink-0", attributes: trigger }, [
-							SORT_LABELS[sort],
-						]),
+						button(
+							h,
+							{ variant: "outline", size: "sm", className: "shrink-0", attributes: trigger },
+							[SORT_LABELS[sort]],
+						),
 					),
 				),
 		},
@@ -110,6 +114,7 @@ const toolbar = (h: H, model: Model, dashboards: ReadonlyArray<ListDashboard>, s
 			value: scopeOf(model.search),
 			onChange: (scope) => Message.ChangedScope({ scope }),
 			ariaLabel: "Filter dashboards by favorite",
+			size: "sm",
 			className: "shrink-0",
 		}),
 		trailing: [

apps/web/src/page/dashboards/list/view-tag-filter.ts

@@ -25,7 +25,7 @@ export const tagFilterView = Submodel.defineView<Combobox.Model, Combobox.Messag
 				h,
 				{
 					variant: "outline",
-					size: "default",
+					size: "sm",
 					className: "shrink-0 gap-1.5",
 					slot: "combobox-trigger",
 					attributes: [

apps/web/src/page/dashboards/templates/view-list.ts

@@ -259,6 +259,7 @@ export const templateList = (
 						value: model.filter,
 						onChange: (filter) => Message.ChangedFilter({ filter }),
 						ariaLabel: "Filter templates by readiness",
+						size: "sm",
 						className: "shrink-0",
 					}),
 				],

apps/web/src/page/infra-integrations/aws/list/view.ts

@@ -328,7 +328,7 @@ export const view = Submodel.defineView<Model, Message, PageViewInputs>((model,
 	return dashboardPage(
 		h,
 		{
-			scrollClassName: "gap-6",
+			gap: "lg",
 			titleContent: hero.title,
 			tabs: headerTabs(h, model),
 			actions: h.div(

apps/web/src/page/infra-integrations/aws/resource/view.ts

@@ -391,7 +391,7 @@ export const view = Submodel.defineView<Model, Message, PageViewInputs>((model,
 			dashboardPage(
 				h,
 				{
-					scrollClassName: "gap-4",
+					gap: "md",
 					titleContent: hero.title,
 					actions: h.div(
 						[h.Class("flex flex-wrap items-center gap-2")],

apps/web/src/page/infra-integrations/cloudflare/list/view.ts

@@ -495,6 +495,6 @@ export const view = Submodel.defineView<Model, Message, PageViewInputs>((model,
 	const row = titleRow(h, model, status?.accountName ?? null, hasData ? listScopeOf(model, data) : null)
 	return h.div(
 		[h.Class("contents"), h.OnMount(ResolveThemeColors({ tokens: THEME_TOKENS }))],
-		[dashboardPage(h, { scrollClassName: "gap-6", ...row }, [statusView(h, model, spark)])],
+		[dashboardPage(h, { gap: "lg", ...row }, [statusView(h, model, spark)])],
 	)
 })

apps/web/src/page/infra-integrations/cloudflare/worker/view.ts

@@ -482,7 +482,7 @@ export const workerPage = (h: H, model: Model, timeZone: string, isTimed = true)
 			dashboardPage(
 				h,
 				{
-					scrollClassName: "gap-6",
+					gap: "lg",
 					titleContent: hero.title,
 					actions: !isTimed
 						? undefined

apps/web/src/page/infra-integrations/cloudflare/zone/view.ts

@@ -263,7 +263,7 @@ export const zonePage = (h: H, model: Model, timeZone: string, options: ZonePage
 						return dashboardPage(
 							h,
 							{
-								scrollClassName: "gap-6",
+								gap: "lg",
 								titleContent: hero.title,
 								actions:
 									headerActions.length === 0

apps/web/src/page/infra-integrations/gcp/list/view.ts

@@ -698,7 +698,7 @@ export const view = Submodel.defineView<Model, Message, PageViewInputs>((model,
 			dashboardPage(
 				h,
 				{
-					scrollClassName: "gap-6",
+					gap: "lg",
 					...titleRow(h, page.header, model, page.isFailed),
 					tabs: page.tabs,
 				},

apps/web/src/page/infra-integrations/gcp/workload/view.ts

@@ -429,7 +429,7 @@ export const workloadPageView = (
 			dashboardPage(
 				h,
 				{
-					scrollClassName: "gap-6",
+					gap: "lg",
 					titleContent: hero.title,
 					actions: pageTime(h, {
 						search: model.search,

apps/web/src/page/infra-integrations/planetscale/db/view.ts

@@ -412,7 +412,7 @@ export const view = Submodel.defineView<Model, Message, PageViewInputs>((model,
 						dashboardPage(
 							h,
 							{
-								scrollClassName: "gap-6",
+								gap: "lg",
 								filters: planetscaleSidebar(
 									h,
 									model,

apps/web/src/page/infra-integrations/planetscale/list/view.ts

@@ -251,7 +251,7 @@ export const view = Submodel.defineView<Model, Message, PageViewInputs>((model,
 	return dashboardPage(
 		h,
 		{
-			scrollClassName: "gap-6",
+			gap: "lg",
 			titleContent: hero.title,
 			actions: pageTime(h, {
 				search: model.search,

apps/web/src/page/infra-integrations/railway/list/view.ts

@@ -211,7 +211,7 @@ export const view = Submodel.defineView<Model, Message, PageViewInputs>((model,
 	return dashboardPage(
 		h,
 		{
-			scrollClassName: "gap-6",
+			gap: "lg",
 			titleContent: hero.title,
 			actions: timeControls(h, {
 				search: model.search,

apps/web/src/page/infra-integrations/railway/service/view.ts

@@ -185,7 +185,7 @@ export const view = Submodel.defineView<Model, Message, PageViewInputs>((model,
 			dashboardPage(
 				h,
 				{
-					scrollClassName: "gap-6",
+					gap: "lg",
 					titleContent: hero.title,
 					actions: timeControls(h, {
 						search: model.search,

apps/web/src/page/infra-integrations/supabase/list/view.ts

@@ -174,7 +174,7 @@ export const view = Submodel.defineView<Model, Message, PageViewInputs>((model,
 	dashboardPage(
 		h,
 		{
-			scrollClassName: "gap-6",
+			gap: "lg",
 			titleContent: pageHeroParts(h, { title: "Supabase", description: description(model) }).title,
 			actions: h.div(
 				[h.Class("flex flex-wrap items-center gap-2")],

apps/web/src/page/infra-integrations/supabase/project/view.ts

@@ -192,7 +192,7 @@ export const view = Submodel.defineView<Model, Message, PageViewInputs>((model,
 			dashboardPage(
 				h,
 				{
-					scrollClassName: "gap-4",
+					gap: "md",
 					titleContent: hero.title,
 					actions: headerActions(h, actions, timeControls),
 				},

apps/web/src/page/infra/containers/detail/view.ts

@@ -167,7 +167,7 @@ export const view = Submodel.defineView<Model, Message, PageViewInputs>((model,
 						toFrame,
 					),
 					rightPanel: rightPanel(h, model),
-					scrollClassName: "gap-6",
+					gap: "lg",
 				},
 				[
 					hero.body,

apps/web/src/page/infra/containers/list/view.ts

@@ -203,7 +203,7 @@ export const view = Submodel.defineView<Model, Message, PageViewInputs>((model,
 					),
 					tabs: hostsViewTabs(h, "containers", model.search),
 					filters: filtersRail(h, model),
-					scrollClassName: "gap-6",
+					gap: "lg",
 				},
 				[
 					activeFilterChips(h, {

apps/web/src/page/infra/hosts/list/view.ts

@@ -139,7 +139,7 @@ export const view = Submodel.defineView<Model, Message, PageViewInputs>((model,
 						],
 					),
 					tabs: hostsViewTabs(h, "hosts", model.search),
-					scrollClassName: "gap-6",
+					gap: "lg",
 				},
 				[
 					body(h, model, inputs),

apps/web/src/page/infra/kit/page-parts.ts

@@ -106,7 +106,7 @@ export type SearchToolbarOptions<M> = Readonly<{
 	className?: string
 }>
 
-/** `SearchToolbar` over `SearchInput size="default"` (w-64), on the shared list toolbar. */
+/** `SearchToolbar` over `SearchInput size="sm"` (w-64), on the shared list toolbar. */
 export const searchToolbar = <M>(h: HtmlBuilder<M>, options: SearchToolbarOptions<M>): Html =>
 	listToolbar(h, {
 		// Parents space their sections; the list toolbar's own bottom padding would double it.
@@ -116,7 +116,7 @@ export const searchToolbar = <M>(h: HtmlBuilder<M>, options: SearchToolbarOption
 			[
 				searchInput(h, {
 					id: options.id,
-					size: "default",
+					size: "sm",
 					className: "w-64",
 					placeholder: options.placeholder,
 					value: options.value,

apps/web/src/page/investigations/list/view.ts

@@ -159,6 +159,7 @@ const toolbar = (
 				view: SelectView.view,
 				viewInputs: {
 					entries: KIND_ENTRIES,
+					size: "sm",
 					className: "w-36",
 					renderValue: (value) => [kindLabel(value)],
 					toView: (parts) => h.div([h.Class("contents")], parts),
@@ -171,6 +172,7 @@ const toolbar = (
 				view: SelectView.view,
 				viewInputs: {
 					entries: SORT_ENTRIES,
+					size: "sm",
 					className: "w-44",
 					renderValue: (value) => [sortLabel(value)],
 					toView: (parts) => h.div([h.Class("contents")], parts),
@@ -179,7 +181,7 @@ const toolbar = (
 			}),
 			searchInput(h, {
 				id: "investigations-search",
-				size: "default",
+				size: "sm",
 				className: "w-auto min-w-56 max-w-sm flex-1",
 				placeholder: "Search subjects and findings",
 				value: model.searchDraft,

apps/web/src/page/metrics/browse/view.ts

@@ -80,7 +80,7 @@ const typeItem =
 const toolbarSearch = (h: H, model: Model): Html =>
 	searchInput(h, {
 		id: "metrics-search",
-		size: "default",
+		size: "sm",
 		className: "max-w-sm w-64",
 		placeholder: "Search metrics…",
 		value: model.searchInput,
@@ -100,6 +100,7 @@ const filters = (h: H, model: Model): Html =>
 			entries: TYPE_ENTRIES,
 			renderItem: typeItem(h, AsyncData.getData(model.summary.data)),
 			ariaLabel: "Metric type",
+			size: "sm",
 			className: "w-auto min-w-0",
 			toView: (parts) =>
 				h.div(

apps/web/src/page/replays/kit/replays-toolbar.ts

@@ -60,7 +60,7 @@ export const replaysToolbar = <M>(h: HtmlBuilder<M>, options: ReplaysToolbarOpti
 			placeholder: "Search by URL…",
 			onInput: options.onInput,
 			onClear: options.onClear,
-			size: "default",
+			size: "sm",
 			className: cn("max-w-sm", "w-full sm:max-w-sm"),
 		}),
 		trailing: [