diff --git a/apps/web/src/page/agent-sessions/list/view-toolbar.ts b/apps/web/src/page/agent-sessions/list/view-toolbar.ts index 0595d6f342..41924bef3b 100644 --- a/apps/web/src/page/agent-sessions/list/view-toolbar.ts +++ b/apps/web/src/page/agent-sessions/list/view-toolbar.ts @@ -15,11 +15,11 @@ type H = HtmlBuilder 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, diff --git a/apps/web/src/page/agent-sessions/tools-kit/toolbar.ts b/apps/web/src/page/agent-sessions/tools-kit/toolbar.ts index cef7cea8b0..9e4de4cbd5 100644 --- a/apps/web/src/page/agent-sessions/tools-kit/toolbar.ts +++ b/apps/web/src/page/agent-sessions/tools-kit/toolbar.ts @@ -79,7 +79,7 @@ export type ToolbarConfig = Readonly<{ const nameSearchInput = (h: HtmlBuilder, search: NonNullable["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, diff --git a/apps/web/src/page/alerts/hub/view-rules.ts b/apps/web/src/page/alerts/hub/view-rules.ts index 0801cadda7..39adb0d26e 100644 --- a/apps/web/src/page/alerts/hub/view-rules.ts +++ b/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, diff --git a/apps/web/src/page/analytics/view.ts b/apps/web/src/page/analytics/view.ts index b39de8a20c..0a93db7adf 100644 --- a/apps/web/src/page/analytics/view.ts +++ b/apps/web/src/page/analytics/view.ts @@ -184,7 +184,7 @@ export const view = Submodel.defineView((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")], diff --git a/apps/web/src/page/code-review/kit/layout.ts b/apps/web/src/page/code-review/kit/layout.ts index ef424f8f0f..71b3bfd988 100644 --- a/apps/web/src/page/code-review/kit/layout.ts +++ b/apps/web/src/page/code-review/kit/layout.ts @@ -100,7 +100,8 @@ export const codeReviewLayout = (options: LayoutOptions, 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 diff --git a/apps/web/src/page/dashboards/kit/list-parts.ts b/apps/web/src/page/dashboards/kit/list-parts.ts index 2fe0f35e0a..33762931b9 100644 --- a/apps/web/src/page/dashboards/kit/list-parts.ts +++ b/apps/web/src/page/dashboards/kit/list-parts.ts @@ -32,7 +32,7 @@ export const listSectionHeader = ( ], ) -/** `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 = ( h: HtmlBuilder, options: Readonly<{ @@ -45,7 +45,7 @@ export const toolbarSearch = ( ): Html => searchInput(h, { id: options.id, - size: "default", + size: "sm", className: cn("max-w-sm", options.className), placeholder: options.placeholder, value: options.draft, diff --git a/apps/web/src/page/dashboards/list/view-list.ts b/apps/web/src/page/dashboards/list/view-list.ts index 44dd890997..809ab948c5 100644 --- a/apps/web/src/page/dashboards/list/view-list.ts +++ b/apps/web/src/page/dashboards/list/view-list.ts @@ -57,7 +57,9 @@ const tagFilter = (h: H, model: Model, allTags: ReadonlyArray): 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, s value: scopeOf(model.search), onChange: (scope) => Message.ChangedScope({ scope }), ariaLabel: "Filter dashboards by favorite", + size: "sm", className: "shrink-0", }), trailing: [ diff --git a/apps/web/src/page/dashboards/list/view-tag-filter.ts b/apps/web/src/page/dashboards/list/view-tag-filter.ts index b82dc402ca..4e58e512db 100644 --- a/apps/web/src/page/dashboards/list/view-tag-filter.ts +++ b/apps/web/src/page/dashboards/list/view-tag-filter.ts @@ -25,7 +25,7 @@ export const tagFilterView = Submodel.defineView Message.ChangedFilter({ filter }), ariaLabel: "Filter templates by readiness", + size: "sm", className: "shrink-0", }), ], diff --git a/apps/web/src/page/infra-integrations/aws/list/view.ts b/apps/web/src/page/infra-integrations/aws/list/view.ts index c44bea3bf4..30c2ac62d6 100644 --- a/apps/web/src/page/infra-integrations/aws/list/view.ts +++ b/apps/web/src/page/infra-integrations/aws/list/view.ts @@ -328,7 +328,7 @@ export const view = Submodel.defineView((model, return dashboardPage( h, { - scrollClassName: "gap-6", + gap: "lg", titleContent: hero.title, tabs: headerTabs(h, model), actions: h.div( diff --git a/apps/web/src/page/infra-integrations/aws/resource/view.ts b/apps/web/src/page/infra-integrations/aws/resource/view.ts index d275b1416c..851a707d58 100644 --- a/apps/web/src/page/infra-integrations/aws/resource/view.ts +++ b/apps/web/src/page/infra-integrations/aws/resource/view.ts @@ -391,7 +391,7 @@ export const view = Submodel.defineView((model, dashboardPage( h, { - scrollClassName: "gap-4", + gap: "md", titleContent: hero.title, actions: h.div( [h.Class("flex flex-wrap items-center gap-2")], diff --git a/apps/web/src/page/infra-integrations/cloudflare/list/view.ts b/apps/web/src/page/infra-integrations/cloudflare/list/view.ts index c10e442a7e..43561f1494 100644 --- a/apps/web/src/page/infra-integrations/cloudflare/list/view.ts +++ b/apps/web/src/page/infra-integrations/cloudflare/list/view.ts @@ -495,6 +495,6 @@ export const view = Submodel.defineView((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)])], ) }) diff --git a/apps/web/src/page/infra-integrations/cloudflare/worker/view.ts b/apps/web/src/page/infra-integrations/cloudflare/worker/view.ts index b525f08b57..499f959f65 100644 --- a/apps/web/src/page/infra-integrations/cloudflare/worker/view.ts +++ b/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 diff --git a/apps/web/src/page/infra-integrations/cloudflare/zone/view.ts b/apps/web/src/page/infra-integrations/cloudflare/zone/view.ts index 36819e5a9a..56bae99d1b 100644 --- a/apps/web/src/page/infra-integrations/cloudflare/zone/view.ts +++ b/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 diff --git a/apps/web/src/page/infra-integrations/gcp/list/view.ts b/apps/web/src/page/infra-integrations/gcp/list/view.ts index a88db940df..de13971575 100644 --- a/apps/web/src/page/infra-integrations/gcp/list/view.ts +++ b/apps/web/src/page/infra-integrations/gcp/list/view.ts @@ -698,7 +698,7 @@ export const view = Submodel.defineView((model, dashboardPage( h, { - scrollClassName: "gap-6", + gap: "lg", ...titleRow(h, page.header, model, page.isFailed), tabs: page.tabs, }, diff --git a/apps/web/src/page/infra-integrations/gcp/workload/view.ts b/apps/web/src/page/infra-integrations/gcp/workload/view.ts index 8042fb7680..c24c2a25d1 100644 --- a/apps/web/src/page/infra-integrations/gcp/workload/view.ts +++ b/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, diff --git a/apps/web/src/page/infra-integrations/planetscale/db/view.ts b/apps/web/src/page/infra-integrations/planetscale/db/view.ts index facc3200b1..2991c60dd3 100644 --- a/apps/web/src/page/infra-integrations/planetscale/db/view.ts +++ b/apps/web/src/page/infra-integrations/planetscale/db/view.ts @@ -412,7 +412,7 @@ export const view = Submodel.defineView((model, dashboardPage( h, { - scrollClassName: "gap-6", + gap: "lg", filters: planetscaleSidebar( h, model, diff --git a/apps/web/src/page/infra-integrations/planetscale/list/view.ts b/apps/web/src/page/infra-integrations/planetscale/list/view.ts index e5b006b3ac..51b50226ad 100644 --- a/apps/web/src/page/infra-integrations/planetscale/list/view.ts +++ b/apps/web/src/page/infra-integrations/planetscale/list/view.ts @@ -251,7 +251,7 @@ export const view = Submodel.defineView((model, return dashboardPage( h, { - scrollClassName: "gap-6", + gap: "lg", titleContent: hero.title, actions: pageTime(h, { search: model.search, diff --git a/apps/web/src/page/infra-integrations/railway/list/view.ts b/apps/web/src/page/infra-integrations/railway/list/view.ts index 7ec497210f..391776d5d1 100644 --- a/apps/web/src/page/infra-integrations/railway/list/view.ts +++ b/apps/web/src/page/infra-integrations/railway/list/view.ts @@ -211,7 +211,7 @@ export const view = Submodel.defineView((model, return dashboardPage( h, { - scrollClassName: "gap-6", + gap: "lg", titleContent: hero.title, actions: timeControls(h, { search: model.search, diff --git a/apps/web/src/page/infra-integrations/railway/service/view.ts b/apps/web/src/page/infra-integrations/railway/service/view.ts index b8c8a79633..8cefeb7d91 100644 --- a/apps/web/src/page/infra-integrations/railway/service/view.ts +++ b/apps/web/src/page/infra-integrations/railway/service/view.ts @@ -185,7 +185,7 @@ export const view = Submodel.defineView((model, dashboardPage( h, { - scrollClassName: "gap-6", + gap: "lg", titleContent: hero.title, actions: timeControls(h, { search: model.search, diff --git a/apps/web/src/page/infra-integrations/supabase/list/view.ts b/apps/web/src/page/infra-integrations/supabase/list/view.ts index 6dd3c35118..3d77b0c751 100644 --- a/apps/web/src/page/infra-integrations/supabase/list/view.ts +++ b/apps/web/src/page/infra-integrations/supabase/list/view.ts @@ -174,7 +174,7 @@ export const view = Submodel.defineView((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")], diff --git a/apps/web/src/page/infra-integrations/supabase/project/view.ts b/apps/web/src/page/infra-integrations/supabase/project/view.ts index cdfe0fe77a..daf45758f7 100644 --- a/apps/web/src/page/infra-integrations/supabase/project/view.ts +++ b/apps/web/src/page/infra-integrations/supabase/project/view.ts @@ -192,7 +192,7 @@ export const view = Submodel.defineView((model, dashboardPage( h, { - scrollClassName: "gap-4", + gap: "md", titleContent: hero.title, actions: headerActions(h, actions, timeControls), }, diff --git a/apps/web/src/page/infra/containers/detail/view.ts b/apps/web/src/page/infra/containers/detail/view.ts index f59ad164fc..267bd0231b 100644 --- a/apps/web/src/page/infra/containers/detail/view.ts +++ b/apps/web/src/page/infra/containers/detail/view.ts @@ -167,7 +167,7 @@ export const view = Submodel.defineView((model, toFrame, ), rightPanel: rightPanel(h, model), - scrollClassName: "gap-6", + gap: "lg", }, [ hero.body, diff --git a/apps/web/src/page/infra/containers/list/view.ts b/apps/web/src/page/infra/containers/list/view.ts index c661f6ccbb..42cebab2e5 100644 --- a/apps/web/src/page/infra/containers/list/view.ts +++ b/apps/web/src/page/infra/containers/list/view.ts @@ -203,7 +203,7 @@ export const view = Submodel.defineView((model, ), tabs: hostsViewTabs(h, "containers", model.search), filters: filtersRail(h, model), - scrollClassName: "gap-6", + gap: "lg", }, [ activeFilterChips(h, { diff --git a/apps/web/src/page/infra/hosts/list/view.ts b/apps/web/src/page/infra/hosts/list/view.ts index f8a6ac6fda..26a3260c7e 100644 --- a/apps/web/src/page/infra/hosts/list/view.ts +++ b/apps/web/src/page/infra/hosts/list/view.ts @@ -139,7 +139,7 @@ export const view = Submodel.defineView((model, ], ), tabs: hostsViewTabs(h, "hosts", model.search), - scrollClassName: "gap-6", + gap: "lg", }, [ body(h, model, inputs), diff --git a/apps/web/src/page/infra/kit/page-parts.ts b/apps/web/src/page/infra/kit/page-parts.ts index 8445dd9714..729c5faabc 100644 --- a/apps/web/src/page/infra/kit/page-parts.ts +++ b/apps/web/src/page/infra/kit/page-parts.ts @@ -106,7 +106,7 @@ export type SearchToolbarOptions = 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 = (h: HtmlBuilder, options: SearchToolbarOptions): Html => listToolbar(h, { // Parents space their sections; the list toolbar's own bottom padding would double it. @@ -116,7 +116,7 @@ export const searchToolbar = (h: HtmlBuilder, options: SearchToolbarOption [ searchInput(h, { id: options.id, - size: "default", + size: "sm", className: "w-64", placeholder: options.placeholder, value: options.value, diff --git a/apps/web/src/page/investigations/list/view.ts b/apps/web/src/page/investigations/list/view.ts index e899706821..b9e4ea8c20 100644 --- a/apps/web/src/page/investigations/list/view.ts +++ b/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, diff --git a/apps/web/src/page/metrics/browse/view.ts b/apps/web/src/page/metrics/browse/view.ts index 821d2a9938..9604e2c787 100644 --- a/apps/web/src/page/metrics/browse/view.ts +++ b/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( diff --git a/apps/web/src/page/replays/kit/replays-toolbar.ts b/apps/web/src/page/replays/kit/replays-toolbar.ts index b43702f852..6ec8341ed8 100644 --- a/apps/web/src/page/replays/kit/replays-toolbar.ts +++ b/apps/web/src/page/replays/kit/replays-toolbar.ts @@ -60,7 +60,7 @@ export const replaysToolbar = (h: HtmlBuilder, 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: [