Fix search bar formatting

[jackrhoa]

What I did

• improved search bar visual; also changed "department" to "school" on browse page since that's what it's actually filtering by

Screenshots

• Before

• After

Summary by CodeRabbit

• Improvements
  • Enhanced keyboard navigation in autocomplete dropdown with improved arrow key support
  • Optimized search bar input spacing for better visual alignment
  • Clarified advanced search form label
  • Updated navigation hints in autocomplete suggestions to reflect keyboard navigation options

[coderabbitai]

📝 Walkthrough

Walkthrough

The search bar component undergoes refinement with adjusted input padding, enhanced autocomplete keyboard navigation with looping support and focus management via tabindex attributes, updated hint text reflecting keyboard-based navigation, and a form label text update from "Department" to "School".

Changes

Cohort / File(s)	Summary
Autocomplete Navigation & Hints tcf_website/static/js/site/lib/search_bar.js, tcf_website/templates/site/common/components/_autocomplete_dropdown.html	Added tabindex="-1" to autocomplete links to remove keyboard focusability, reconfigured arrow-key navigation to target only .autocomplete-item__link with explicit upward and downward looping enabled. Updated dropdown group header hint text from "Tab to select" to "↑↓ to navigate" for Clubs, Courses, and Instructors.
Search Bar Styling tcf_website/static/css/site/components/search_bar.css	Reduced .search-bar__input padding-right from 5rem to 2.75rem and responsive header variant from 3.5rem to 2.75rem to adjust spacing around the actions group.
Form Labels tcf_website/templates/site/catalog/components/_advanced_search_form.html	Changed dropdown label text from "Department" to "School" while maintaining the same combo_name and combo_aria_label attributes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

• artiehumphreys

Poem

🐰 Hops through the search with arrows held high,
No more tabs needed—just navigate the sky!
With padding refined and focus controlled so tight,
The autocomplete dances left, right, up, and down in the night!
From Department to School, the labels now sing,
A smoother search experience—oh, what joy it does bring!

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title 'Fix search bar formatting' is broadly related to the main changes but is overly vague; it captures only the visual/spacing aspect and misses the functional improvements to keyboard navigation and label accuracy.	Consider a more specific title that reflects all key changes, such as 'Improve search bar UI and keyboard navigation' to better convey the scope of modifications.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description covers key sections (What I did, Screenshots) but lacks GitHub Issues, Testing details, and Questions/Discussions sections specified in the template.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-search-bar-formatting

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

tcf_website/static/css/site/components/search_bar.css (1)

36-36: Prefer spacing token over hard-coded 2.75rem.

This keeps spacing centralized and avoids drift from design tokens.

♻️ Suggested tokenized change

-  padding-right: 2.75rem; /* Space for actions group */
+  padding-right: var(--space-11); /* Space for actions group */

-    padding-right: 2.75rem;
+    padding-right: var(--space-11);

Also applies to: 109-109

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@tcf_website/static/css/site/components/search_bar.css` at line 36, Replace
the hard-coded padding-right: 2.75rem with the project spacing token (use your
design token CSS variable, e.g., var(--spacing-11) or the equivalent token in
your codebase) for the selector that currently sets padding-right: 2.75rem;
update both occurrences (the one showing padding-right: 2.75rem and the other at
the second occurrence) so spacing is centralized via the spacing token instead
of a raw rem value.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@tcf_website/static/css/site/components/search_bar.css`:
- Line 36: Replace the hard-coded padding-right: 2.75rem with the project
spacing token (use your design token CSS variable, e.g., var(--spacing-11) or
the equivalent token in your codebase) for the selector that currently sets
padding-right: 2.75rem; update both occurrences (the one showing padding-right:
2.75rem and the other at the second occurrence) so spacing is centralized via
the spacing token instead of a raw rem value.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 102c3c60-c21d-4555-ab55-83bdff546dc4

📥 Commits

Reviewing files that changed from the base of the PR and between 825b43e and 405afc3.

📒 Files selected for processing (4)

• tcf_website/static/css/site/components/search_bar.css
• tcf_website/static/js/site/lib/search_bar.js
• tcf_website/templates/site/catalog/components/_advanced_search_form.html
• tcf_website/templates/site/common/components/_autocomplete_dropdown.html