From 308347d4b6afd2cd9ffc12dd32d8629ef8c31cc3 Mon Sep 17 00:00:00 2001
From: JOY <anh@metados.com>
Date: Mon, 26 Oct 2026 00:13:26 +0700
Subject: [PATCH] fix(web): keep en and cs catalog pages inside a 320px screen
 (#1082)

The catalog sort toggle was nowrap, so the Czech label pushed the page
38px sideways; let it wrap within its container. Separately, the wider
"EN" and "CS" locale labels pushed the phone menu toggle's 44px tap area
3px off screen; trim the compact switcher's padding to fit every label.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/e2e/reflow-contrast.spec.ts                  | 4 ++++
 apps/web/src/app/[locale]/smartphones/page.tsx        | 2 +-
 apps/web/src/app/style/scss/style.scss                | 5 +++++
 apps/web/src/components/elementary/LocaleSwitcher.tsx | 6 ++++--
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/apps/web/e2e/reflow-contrast.spec.ts b/apps/web/e2e/reflow-contrast.spec.ts
index 2aa54c8a..d7bc8002 100644
--- a/apps/web/e2e/reflow-contrast.spec.ts
+++ b/apps/web/e2e/reflow-contrast.spec.ts
@@ -9,6 +9,10 @@ const PHONE_PAGES = [
   '/smartphones/iphone-16-pro-max-256gb',
   '/merchants',
   '/compare',
+  // Longer sort labels pushed the catalog sideways in en and cs
+  // (DOS/Rate#1082).
+  '/en/smartphones',
+  '/cs/smartphones',
 ];
 
 for (const path of PHONE_PAGES) {
diff --git a/apps/web/src/app/[locale]/smartphones/page.tsx b/apps/web/src/app/[locale]/smartphones/page.tsx
index 9bc6d9c5..21cf4879 100644
--- a/apps/web/src/app/[locale]/smartphones/page.tsx
+++ b/apps/web/src/app/[locale]/smartphones/page.tsx
@@ -674,7 +674,7 @@ export async function CategoryCatalogContent({
 
                   <div className="col-xl-5 col-lg-5 col-md-5 col-sm-12">
                     <div className="text-md-end">
-                      <div className="dropdown d-inline-flex p-0">
+                      <div className="dropdown d-inline-flex mw-100 p-0">
                         <a
                           href="#shortfilter"
                           className="dropdown-toggle toogleDrops px-3 py-2"
diff --git a/apps/web/src/app/style/scss/style.scss b/apps/web/src/app/style/scss/style.scss
index 68728f2b..bbdbc400 100644
--- a/apps/web/src/app/style/scss/style.scss
+++ b/apps/web/src/app/style/scss/style.scss
@@ -6423,6 +6423,11 @@ a.mousewheel.center {
   border-radius: 50px;
   transition: all ease 0.4s;
   color: var(--bs-dark);
+  // Long labels ("ŘAZENÍ: VÝCHOZÍ (NEDÁVNO AKTUALIZOVANÉ)") wrap instead of
+  // pushing a 320px page sideways; Bootstrap's toggle is nowrap
+  // (DOS/Rate#1082).
+  max-width: 100%;
+  white-space: normal;
 
   &:hover {
     background-color: var(--bs-primary-bg-subtle);
diff --git a/apps/web/src/components/elementary/LocaleSwitcher.tsx b/apps/web/src/components/elementary/LocaleSwitcher.tsx
index ebd97a46..b7dc13c2 100644
--- a/apps/web/src/components/elementary/LocaleSwitcher.tsx
+++ b/apps/web/src/components/elementary/LocaleSwitcher.tsx
@@ -216,8 +216,10 @@ export function LocaleSwitcher({
         style={{
           height: compact ? '38px' : '48px',
           // The compact switcher sits in the phone header, which has to fit
-          // 320px (DOS/Rate#809).
-          padding: compact ? '0 8px' : '0 14px',
+          // 320px (DOS/Rate#809) with the widest label: "EN" and "CS" are
+          // ~5px wider than "VI" and pushed the menu toggle's tap area off
+          // screen (DOS/Rate#1082).
+          padding: compact ? '0 5px' : '0 14px',
           backgroundColor: isDarkHeader
             ? 'rgba(255, 255, 255, 0.12)'
             : 'var(--bs-card-bg, #ffffff)',