Fix advanced search mobile overflow

[KevinSailema]

Closes #12304

fix

Technical

• Added a mobile-only CSS override scoped to Advanced Search.
• Set the Advanced Search form container to width: 100% for small screens.
• Set Advanced Search text inputs (qtop-*) to width: 100%, margin-right: 0, and box-sizing: border-box.
• Kept the implementation narrow to avoid regressions on other pages that also load shared user page styles.

Testing

1. Run: docker compose run --rm home make css
2. Run: docker compose up -d
3. Open: http://localhost:8080/advancedsearch
4. In responsive mode (for example 320 x 696), verify all Advanced Search text inputs fit within the viewport and no horizontal overflow appears.
5. Smoke-check other search pages (authors, subjects, inside, lists) to confirm no layout regressions from this change.

Screenshot

• Mobile viewport evidence attached in PR showing Advanced Search without input overflow.

Stakeholders

@RayBB @lokesh

[Copilot]

Pull request overview

Fixes the Advanced Search page’s horizontal overflow on small screens by scoping a narrow, mobile-only width override to the advanced search form and its text inputs.

Changes:

• Added a mobile breakpoint rule to make the Advanced Search form and its inputs span width: 100% and remove the right margin.
• Added scoped CSS classes (siteSearch--advanced, siteSearch--advanced-input) to the Advanced Search template to avoid impacting other pages.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
static/css/legacy.css	Adds a max-width 768px override for Advanced Search form/input sizing to prevent mobile overflow.
openlibrary/templates/search/advancedsearch.html	Adds CSS classes to the form and its text inputs so the new mobile styles are narrowly scoped.

[lokesh]

LGTM!

[RayBB]

Nice work on this one!

[RayBB]

@lokesh thanks for reviewing!