Перейти к основному содержимому

NAV-UI-2026-09-18

Цель: видимая, правильно расположенная кнопка закрытия меню на desktop/mobile; при каждом открытии меню прокрутка в начале; длинное слово заголовка careers полностью видно и переносится без выхода за контейнер. Источник: запрос пользователя и два скриншота. Работа поверх существующих изменений разрешена пользователем; никаких неизвестных правок в затрагиваемых компонентах нет.

Ветка: chore/architecture-migration-complete; Git root: BelfProctor/dist. Исходный Git status:

 M CONTRIBUTING.md
 M README.md
 M docs/implementation-handoff-report.md
 M docs/quality-gates-report.md
 M src/features/calculator/Calculator.tsx
 M src/features/calculator/CalculatorForm.module.css
 M src/features/calculator/CalculatorForm.test.tsx
 M src/features/calculator/CalculatorQuote.module.css
 M src/features/calculator/CalculatorQuote.tsx
 M src/features/calculator/HostingFieldset.module.css
 M src/features/calculator/HostingFieldset.tsx
 M src/features/calculator/InstallationFieldset.module.css
 M src/features/calculator/InstallationFieldset.tsx
 M src/features/calculator/ModulesFieldset.module.css
 M src/features/calculator/ModulesFieldset.tsx
 M src/features/calculator/ScaleFieldset.module.css
 M src/features/calculator/ScaleFieldset.tsx
 M src/pages/home/sections/CalculatorSection/CalculatorSection.module.css
 M src/pages/home/sections/CalculatorSection/CalculatorSection.tsx
 M src/styles/tokens.css
 M tests/e2e/navigation.spec.ts
 M tests/e2e/navigation.spec.ts-snapshots/full-page-home-desktop-1440-desktop-1440-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/full-page-home-desktop-1920-desktop-1920-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/full-page-home-mobile-390-mobile-390-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/full-page-home-mobile-430-mobile-430-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/full-page-home-tablet-1024-tablet-1024-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/full-page-home-tablet-768-tablet-768-darwin.png
?? AGENTS.md
?? docs/tasks/
?? tests/e2e/calculator-ui.spec.ts
?? tests/e2e/navigation-layout.spec.ts

Новый navigation-layout.spec.ts создан в рамках этой задачи. Сохраняем тексты и смысл, routes/anchors, calculator/model/prices, фокус, inert, восстановление прокрутки страницы, reduced motion и SEO metadata.

  • Прочитать AGENTS.md, архитектуру, CONTRIBUTING и реальные владельцы.
  • Установить причины по компонентам и скриншотам.
  • Получить падающие regression-тесты до изменения реализации.
  • Исправить layout кнопки, сброс scroll и перенос слова.
  • Проверить шесть viewport, клавиатуру, actual/diff вручную.
  • Осознанно обновить только утверждённую визуальную дельту.
  • Запустить полный npm run quality и записать итог.

Причины: absolute nav-close (40×40) находится над contact panel; nav-overlay остаётся смонтированным и сохраняет scrollTop; careers h1 на телефоне имеет 50 px и не допускает перенос слова внутри.

Блокеров нет. Commit/push/deploy не выполнялись.

Regression evidence до исправления: targeted Playwright на mobile-390 и desktop-1440 — 4 FAIL, 1 PASS, 1 SKIP. Close имеет 40 px вместо 44; после scroll кнопка y=-669; h1 scrollWidth=468 при clientWidth=358. Новый unit тест отдельно FAIL: scrollTop после повторного открытия 600 вместо 0. После исправления SiteHeader unit — 11 PASS; targeted E2E — 14 PASS, 4 SKIP. Первый targeted повтор обнаружил ошибку setup: scrollY измерялся во время smooth anchor navigation; тест теперь явно мгновенно прокручивает к calculator и проверяет реальное восстановление страницы без гонки. Assertions сохранены.

Manual visual показал contact grid при 768 px: заданные min widths съедают правый padding карточки. Новый assertion воспроизвёл FAIL на tablet-768; minmax(0, …) исправляет причину и сохраняет три колонки. На телефоне до 360 px h1 получает 44 px, чтобы не оставлять одну букву в строке. Добавлена проверка минимальной ширины 320 px. Desktop/tablet h1 сохраняет предыдущий layout (hyphens:none); soft hyphen используется только на телефоне.

Визуальный прогон: 23 PASS, 5 SKIP, 20 FAIL — все FAIL соответствуют согласованной дельте. Вручную просмотрены actual/diff: open home/partners во всех шести viewport, open careers на tablet/desktop, closed/full careers на двух телефонах. Дополнительно просмотрен screenshot 320 px, PASS. После review вручную скопированы ровно эти 20 actual в соответствующие эталоны. Mobile careers open ещё не выполнялся: closed assertion остановил тест; следующий шаг — получить и проверить эти два open actual/diff. Остальные full/closed baselines не менялись. Threshold 0.003 сохранён.

Два оставшихся open careers actual/diff на mobile-390/430 просмотрены, совпадают с ожидаемой мобильной композицией меню. Вручную обновлены эти два эталона; итог этой задачи — 22 baselines (18 open меню + 2 closed careers + 2 full careers). Автоматического обновления не было.

Изменённые владельцы: NavigationDialog (toolbar, контрастная кнопка 44 px, порядок контента), NavigationDialogResponsive (sticky toolbar, modal слой, адаптивная контактная сетка), useNavigationDialog (scrollTop=0 при открытии), tokens (z-navigation-modal), CareersHero (мягкий перенос сертифи-цированным, локальный fallback overflow-wrap, 44 px до 360 px). SiteHeader unit и новый navigation-layout E2E проверяют наблюдаемое поведение. Layout desktop h1, metadata/routes/anchors и калькулятор не меняются.

Общий quality gate: следующий шаг.

Первый полный quality остановлен lint:css: после удаления старого intro p обнаружился дублирующий selector contact-panel p. Правила объединены без изменения computed styles; следующий полный прогон выполняется заново.

Второй quality остановлен исходным PageComposition unit: мягкий перенос попал в accessible name заголовка. Исправлена реализация: исходный текст из pageMetadata остаётся accessible name, discretionary soft hyphen применяется только к отображаемому тексту. Исходный строгий тест не ослаблен; новый E2E также проверяет точное accessible name. Визуальный layout не изменился.

Третий quality прошёл все gates до E2E: 212 PASS, 13 штатных SKIP, 3 FAIL. Все новые navigation cases и визуальные baselines PASS. FAIL — прежний calculator spacing test на 1024/1440/1920: две последовательные boundingBox измерялись в разные моменты smooth anchor scroll (значения -20/12/-71 при постоянных CSS margins). Измерение исправлено на один синхронный DOM callback; assertion gap >=24 не ослаблен, реализация калькулятора не менялась.

Focus ring close перенесён внутрь белой кнопки (offset -4), чтобы тёмный контур сохранял контраст на зелёном и светлом фонах. Состояние вручную проверено с клавиатуры в браузере приложения; Escape возвращает фокус trigger. После последней правки focus и исправления гонки теста — новый полный quality.

Финальный npm run quality — PASS, exit 0. Лог: /private/tmp/belf-navigation-quality-final.log. Format, lint, lint:css, typecheck/build, 59 unit tests, coverage, changed-line coverage, architecture (14 fixtures), cycles (94 sources), bundle, links, rendered SEO, a11y (24 scenarios), Lighthouse и E2E PASS. E2E: 215 PASS, 13 штатных SKIP, 0 FAIL. 13 SKIP: 4 desktop-only calculator, 4 mobile-only scrolling на остальных viewport, 5 дополнительных 320px checks на остальных проектах. Все 15 применимых новых navigation-layout cases PASS. Все 18 calculator-ui cases PASS, включая исправленный atomic spacing test. Source size limits и git diff --check PASS.

UI/behavior дельта: отдельная верхняя строка меню и подписанная кнопка «Закрыть» с X, touch target 44 px; на телефоне строка sticky с safe-area, выше header, доступна после scroll. Каждое открытие сбрасывает scrollTop=0; позиция страницы и focus восстанавливаются после close. Контакты на планшете сохраняют padding. Длинное слово h1 переносится с дефисом на телефоне, fallback предотвращает overflow; accessible name остаётся исходным. Desktop heading layout, routes, anchors, SEO metadata и бизнес-правила калькулятора сохранены. Visual threshold 0.003 не менялся.

Вручную проверены actual/diff шести viewport 390, 430, 768, 1024, 1440, 1920, дополнительно 320px screenshot и sticky toolbar после прокрутки обоих телефонов. Keyboard opening, close focus ring и Escape проверены в app browser; временный viewport override сброшен, меню закрыто, careers открыт. На физическом iPhone/Safari не проверялось; в Playwright окружении установлен Chromium. Все доступные локальные gates пройдены. Lighthouse — lab audit. Блокеров и незавершённых локальных пунктов нет.

Commit/push/deploy не выполнялись. Изменения локальные; исходные пользовательские правки сохранены. Полный итоговый Git status:

 M CONTRIBUTING.md
 M README.md
 M docs/implementation-handoff-report.md
 M docs/quality-gates-report.md
 M src/features/calculator/Calculator.tsx
 M src/features/calculator/CalculatorForm.module.css
 M src/features/calculator/CalculatorForm.test.tsx
 M src/features/calculator/CalculatorQuote.module.css
 M src/features/calculator/CalculatorQuote.tsx
 M src/features/calculator/HostingFieldset.module.css
 M src/features/calculator/HostingFieldset.tsx
 M src/features/calculator/InstallationFieldset.module.css
 M src/features/calculator/InstallationFieldset.tsx
 M src/features/calculator/ModulesFieldset.module.css
 M src/features/calculator/ModulesFieldset.tsx
 M src/features/calculator/ScaleFieldset.module.css
 M src/features/calculator/ScaleFieldset.tsx
 M src/pages/careers/sections/CareersHero/CareersHero.module.css
 M src/pages/careers/sections/CareersHero/CareersHero.tsx
 M src/pages/home/sections/CalculatorSection/CalculatorSection.module.css
 M src/pages/home/sections/CalculatorSection/CalculatorSection.tsx
 M src/styles/tokens.css
 M src/widgets/site-header/NavigationDialog.module.css
 M src/widgets/site-header/NavigationDialog.tsx
 M src/widgets/site-header/NavigationDialogResponsive.module.css
 M src/widgets/site-header/SiteHeader.test.tsx
 M src/widgets/site-header/useNavigationDialog.ts
 M tests/e2e/navigation.spec.ts
 M tests/e2e/navigation.spec.ts-snapshots/full-page-careers-mobile-390-mobile-390-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/full-page-careers-mobile-430-mobile-430-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/full-page-home-desktop-1440-desktop-1440-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/full-page-home-desktop-1920-desktop-1920-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/full-page-home-mobile-390-mobile-390-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/full-page-home-mobile-430-mobile-430-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/full-page-home-tablet-1024-tablet-1024-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/full-page-home-tablet-768-tablet-768-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/navigation-closed-careers-mobile-390-mobile-390-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/navigation-closed-careers-mobile-430-mobile-430-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/navigation-open-careers-desktop-1440-desktop-1440-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/navigation-open-careers-desktop-1920-desktop-1920-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/navigation-open-careers-mobile-390-mobile-390-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/navigation-open-careers-mobile-430-mobile-430-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/navigation-open-careers-tablet-1024-tablet-1024-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/navigation-open-careers-tablet-768-tablet-768-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/navigation-open-home-desktop-1440-desktop-1440-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/navigation-open-home-desktop-1920-desktop-1920-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/navigation-open-home-mobile-390-mobile-390-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/navigation-open-home-mobile-430-mobile-430-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/navigation-open-home-tablet-1024-tablet-1024-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/navigation-open-home-tablet-768-tablet-768-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/navigation-open-partners-desktop-1440-desktop-1440-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/navigation-open-partners-desktop-1920-desktop-1920-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/navigation-open-partners-mobile-390-mobile-390-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/navigation-open-partners-mobile-430-mobile-430-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/navigation-open-partners-tablet-1024-tablet-1024-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/navigation-open-partners-tablet-768-tablet-768-darwin.png
?? AGENTS.md
?? docs/tasks/
?? tests/e2e/calculator-ui.spec.ts
?? tests/e2e/navigation-layout.spec.ts