Unify filter/search bars onto shared CSS classes + partials

[maebeale]

🤖 suggested review level: 5 Inspect 🔬 wide-reaching filter-bar restyle across ~30 index pages + shared helper/partials and select-height behavior

What is the goal of this PR and why is this important?

• Filter/search bars had drifted into ~30 near-identical-but-inconsistent class strings (rounded-lg vs -md, different focus/label styles, btn-utility vs -outline vs -secondary clear buttons, ad-hoc search-icon buttons). This unifies them so every filter bar reads the same and future restyling is a one-place change.

How did you approach the change?

• Single source of styling, no @apply: field/label classes live in SearchFormHelper#search_field_class / #search_label_class (Tailwind v4 scans app/helpers via @source). A helper rather than a partial because these classes decorate ~100 heterogeneous controls (selects, remote/multi-selects, date/number/text inputs) that can't share one field partial.
• Shared partials for whole repeated elements: shared/_search_clear (standard "Clear filters" button) and shared/_search_submit (magnifier submit), both inline default Tailwind.
• Swept ~34 filter partials + the shared events filter bar (registrants roster, bulk-reminder picker, attendees) + a few one-off filter forms onto them.
• Placeholders render small + light grey and revert to normal when filled; "All"-prompt selects grey their prompt and match sibling text-input height. The only rule left in CSS is that select-placeholder :has() rule, written as raw CSS (line-height: 1.5rem), since its selector isn't expressible as a utility.
• SimpleForm inputs get the same small-grey placeholder.

Anything else to add?

• Verified: full suite green — 6914 examples, 0 failures (ai/test_extra, Vite build + all system specs). Every migrated ERB template compiles; no search-field/search-label refs remain anywhere.
• Admin ahoy-activities keeps its page-specific indigo action buttons by design (fields/labels unified only).

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[jmilljr24]

Suggested change

	/* Shared filter/search-bar styling — restyle every filter bar here. In the
	components layer so markup utility overrides (w-64, bg-white, pr-10) win. */
	@layer components {
	.search-field {
	@apply w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm;
	@apply focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none;
	}
	.search-field::placeholder {
	@apply text-sm text-gray-400;
	}
	.search-label {
	@apply block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1;
	}
	/* Grey the "All" prompt like a placeholder; text-sm/6 keeps the input's
	line-height so the select stays the same height. */
	.search-select-placeholder:has(option:first-child:checked) {
	@apply text-sm/6 text-gray-400;
	}
	/* Magnifier submit; pair with a `.search-field pr-10` input in a relative wrapper. */
	.search-submit {
	@apply absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-600;
	}
	}
	.search-select-placeholder:has(option:first-child:checked) {
	color: rgb(156 163 175); /* gray-400 */
	font-size: 0.875rem; /* text-sm */
	line-height: 1.5; /* /6 */
	}

Using @apply is frowned up with the guidance we just added about tailwind and we've done a pretty good job about not using it thus far.

Could we create shared partials instead and use the default tailwind classes in them? It would remove a lot of duplicate code and also remove the need for @apply.

I think only that placeholder code might need to live in this file and that shouldn't need @apply.

[maebeale]

🤖 From Claude: Done — all @apply removed. .search-field/.search-label/.search-submit are gone; field/label styling moved to SearchFormHelper#search_field_class/#search_label_class (a helper rather than a partial because these classes decorate ~100 heterogeneous controls — selects, remote/multi-selects, date/number/text inputs — that can't share one field partial; Tailwind v4 still generates the literals since it scans app/helpers via @source). _search_submit/_search_clear stay as shared partials with inline default Tailwind. Only this :has() placeholder rule remains, as raw CSS.

Two notes: I applied it via a normal commit (GitHub's "Apply suggestion" is a UI-only button, no API to commit it), and I corrected the line-height in your snippet from 1.5 to 1.5rem — text-sm/6 means a 1.5rem line-height, and the unitless 1.5 would have shrunk the select and undone the "keep it the same height as a text input" purpose this rule exists for.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[jmilljr24]

This comment only makes sense if you are looking at the PR.

[maebeale]

🤖 From Claude: Good catch — reworded it to describe what the rule does (greying the select's blank first option like a placeholder, raw CSS because :has() has no utility equivalent) rather than narrating the change. Pushed in 2b60e6f.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.