[JOY (JOY)]

Closes #1082

What

At 320px every catalog page scrolled sideways in English (3px) and Czech (38px). There were two causes:

1. Sort toggle (#shortfilter.toogleDrops): Bootstrap's .dropdown-toggle is white-space: nowrap, so the uppercase Czech label ("ŘAZENÍ: VÝCHOZÍ (NEDÁVNO AKTUALIZOVANÉ)") ended at 358px. The toggle now wraps (white-space: normal; max-width: 100%), and its d-inline-flex wrapper gets mw-100 so the flex item can shrink.
2. Phone header: "EN"/"CS" are about 5px wider than "VI" in the compact locale switcher. That pushed the menu toggle right, and its centred 44px tap area (::after, fix(web): touch targets under 44px on phones (menu toggle, tray remove, expand, footer links) #717) ended at 323px. This affects every /en and /cs page, not only catalogs. The compact switcher's horizontal padding goes from 8px to 5px; the button stays 38px tall and about 60px wide.

Test

• e2e/reflow-contrast.spec.ts adds /en/smartphones and /cs/smartphones to the 320px pages. Each one checks scrollWidth <= 320 and the toggle tap area.
• Mutation checks:
  • With only the sort fix, both new tests fail at 323px.
  • With only the padding fix (sort CSS and mw-100 reverted), /cs/smartphones fails at 358px.
  • With both fixes, all 34 tests in reflow-contrast, navbar-layout, navbar-one-row and touch-targets pass.

🤖 Generated with Claude Code

---

📌 TL;DR

Fixes a horizontal overflow issue on 320px mobile viewports caused by long localized sort labels and locale switcher text, ensuring the catalog and header remain within screen bounds.

🎯 Type of Change

• 🚀 New feature
• 🐛 Bugfix
• 🧹 Refactor
• ⚡ Performance
• 📚 Documentation
• ⚙️ CI / Configuration

🔍 Changes Walkthrough

File	Summary of Changes
apps/web/e2e/reflow-contrast.spec.ts	Adds /en/smartphones and /cs/smartphones to the list of pages tested for horizontal reflow/contrast issues to prevent regression of the overflow bug.
apps/web/src/app/[locale]/smartphones/page.tsx	Adds the mw-100 (max-width: 100%) utility class to the sort dropdown container to prevent it from exceeding the parent column width.
apps/web/src/app/style/scss/style.scss	Updates the .toogleDrops style to allow text wrapping (white-space: normal) and enforce max-width: 100%, overriding Bootstrap's default nowrap behavior for long labels.
apps/web/src/components/elementary/LocaleSwitcher.tsx	Reduces the horizontal padding of the compact locale switcher from 8px to 5px to accommodate wider locale codes (e.g., "EN", "CS") without pushing the menu toggle off-screen on 320px devices.

📊 Architectural Flow

flowchart TD
    A[Mobile Viewport 320px] --> B{Content Width Check}
    B -->|Sort Dropdown| C[Long Localized Label]
    B -->|Header| D[Locale Switcher]
    
    C --> E[CSS: white-space: normal<br>max-width: 100%]
    D --> F[Padding Reduced: 8px -> 5px]
    
    E --> G[Text Wraps / Fits Container]
    F --> H[Toggle Stays On-Screen]
    
    G --> I[No Horizontal Scroll]
    H --> I

Loading

[claude]

⚠️ Code review skipped — your organization has no extra usage available to pay for this review.

If your organization's extra usage balance is empty, an organization admin can add extra usage credits at claude.ai/admin-settings/usage. If its monthly spend limit was reached, an admin can raise it on the same page. If neither applies, contact Anthropic support.

Once extra usage is available, someone with write access to this repository can comment @claude review on this pull request to trigger a review.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
rate	Ready	Preview	Oct 25, 2026 5:14pm UTC

[dos]

⏱️ Code Review completed (4 eligible files · 2,787 chars · 1 model call(s) · 1 PR unit(s))

Whole diff with bounded context at base 435b067 / head 308347d.

✅ CLEAN_PASS: Complete diff reviewed

[coderabbitai]

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 30 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: a06f955f-7e5d-4d39-99ce-29e35626be09

Commits

Reviewing files that changed from the base of the PR and between 435b067 and 308347d.

Files selected for processing: 4

• apps/web/e2e/reflow-contrast.spec.ts
• apps/web/src/app/[locale]/smartphones/page.tsx
• apps/web/src/app/style/scss/style.scss
• apps/web/src/components/elementary/LocaleSwitcher.tsx

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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.}

[JOY (JOY)]

Local review (CodeRabbit was rate-limited): checked both fixes at 320px in a local production build. The Czech sort label wraps to two lines inside its pill, and the EN/VI compact switchers keep a 38px-tall button with the flag, label and chevron intact. The menu toggle's tap area ends inside the viewport. mw-100 is needed because the d-inline-flex wrapper otherwise sizes to the nowrap max-content. Each fix is covered by its own mutation check. No findings.