[bug][ui][responsive] Планшет 768px: глобальный сайдбар накладывается на контент (Role-колонка за краем); мобайл 390px: таймстампы списка за экраном #291

Open
opened 2026-07-02 16:13:46 +03:00 by agent_qa · 1 comment
Collaborator

Общий responsive-баг ядра (не связан с git-sync #119). Найден полным web-UI прогоном (web-test-orchestrator) + подтверждён независимым верификатором с замером координат.

F1 — Планшет 768px: сайдбар открыт по умолчанию и НАКЛАДЫВАЕТСЯ на контент (MEDIUM)

  • Repro: любой экран при ширине ровно 768px — особенно /settings/members, /settings/workspace, страница /s/<space>/p/<slug>, /home.
  • Замер (верификатор): nav-сайдбар занимает x=0..350, <main> x=0..768, таблица Members x=332..932 — колонка Role (<th> x=685..865) и 4-я колонка действий (x=865..932) уходят ЗА 768px БЕЗ горизонтального скролла (scrollWidth=768). Слева заголовки/табы клипаются под открытым сайдбаром («Members»→«embers», «User»→«ser»). Role/actions на планшете фактически недоступны.
  • Причина (гипотеза): GlobalAppShell (apps/client/src/components/layouts/global/global-app-shell.tsx) использует AppShell navbar breakpoint: "sm" (48em = 768px). На граничной ширине 768px рассинхрон между режимом drawer (mobile) и desktop-offset: сайдбар показан, но main не сдвинут/не перекрыт backdrop'ом.

F2 — Мобайл 390px: колонка времени в списках за экраном (MEDIUM/LOW)

  • Repro: /home и /s/<space> при 390px, список «Recently updated».
  • Замер: таймстамп-элементы рендерятся на x=390..500 в 390px viewport → целиком за правым краем, видны только горизонтальным скроллом. ~4px overflow документа на /home.

F3/F4 — мелочи (LOW)

  • Мобайл drawer без backdrop: при открытии сдвигает и клипает контент вместо оверлея.
  • После Create page на мобайле редактор не выводится в вид (остаётся дерево страниц), страница «как будто не открылась».

Доказательства

Скриншоты: _wt/fleet/VISUAL/ (setmembers_768-, setworkspace_768-, page_768-, home_390-, drawer_open_390, newpage_390) и _wt/fleet/VERIFY/b_members_768.png (с замерами).

Заметка

Desktop (1280) и «узкий» мобайл (сайдбар корректно сворачивается в иконки) — ОК. Дефект в диапазоне планшета/граничной ширины. Фикс — аккуратная работа с брейкпоинтами Mantine AppShell + поведением drawer (backdrop/offset), требует итеративной визуальной проверки на нескольких ширинах; выделено отдельно от #119. Готов сделать PR с фиксом по запросу.

Общий responsive-баг ядра (не связан с git-sync #119). Найден полным web-UI прогоном (web-test-orchestrator) + подтверждён независимым верификатором с замером координат. ## F1 — Планшет 768px: сайдбар открыт по умолчанию и НАКЛАДЫВАЕТСЯ на контент (MEDIUM) - **Repro:** любой экран при ширине ровно 768px — особенно `/settings/members`, `/settings/workspace`, страница `/s/<space>/p/<slug>`, `/home`. - **Замер (верификатор):** nav-сайдбар занимает x=0..350, `<main>` x=0..768, таблица Members x=332..932 — колонка **Role** (`<th>` x=685..865) и 4-я колонка действий (x=865..932) уходят ЗА 768px БЕЗ горизонтального скролла (scrollWidth=768). Слева заголовки/табы клипаются под открытым сайдбаром («Members»→«embers», «User»→«ser»). Role/actions на планшете фактически недоступны. - **Причина (гипотеза):** `GlobalAppShell` (apps/client/src/components/layouts/global/global-app-shell.tsx) использует `AppShell` navbar `breakpoint: "sm"` (48em = 768px). На граничной ширине 768px рассинхрон между режимом drawer (mobile) и desktop-offset: сайдбар показан, но main не сдвинут/не перекрыт backdrop'ом. ## F2 — Мобайл 390px: колонка времени в списках за экраном (MEDIUM/LOW) - **Repro:** `/home` и `/s/<space>` при 390px, список «Recently updated». - **Замер:** таймстамп-элементы рендерятся на x=390..500 в 390px viewport → целиком за правым краем, видны только горизонтальным скроллом. ~4px overflow документа на `/home`. ## F3/F4 — мелочи (LOW) - Мобайл drawer без backdrop: при открытии сдвигает и клипает контент вместо оверлея. - После Create page на мобайле редактор не выводится в вид (остаётся дерево страниц), страница «как будто не открылась». ## Доказательства Скриншоты: `_wt/fleet/VISUAL/` (setmembers_768-*, setworkspace_768-*, page_768-*, home_390-*, drawer_open_390, newpage_390) и `_wt/fleet/VERIFY/b_members_768.png` (с замерами). ## Заметка Desktop (1280) и «узкий» мобайл (сайдбар корректно сворачивается в иконки) — ОК. Дефект в диапазоне планшета/граничной ширины. Фикс — аккуратная работа с брейкпоинтами Mantine AppShell + поведением drawer (backdrop/offset), требует итеративной визуальной проверки на нескольких ширинах; выделено отдельно от #119. Готов сделать PR с фиксом по запросу.
Author
Collaborator

Дополнение к #291 (мобайл 390px, из повторного web-UI прогона): подтверждено, что помимо планшетного overlay (фикс в PR #292) остаются мобильные остатки:

  • F1: таблица /settings/members (~600px) шире 390px — колонки Role/actions уходят за край без явного горизонт-скролла (сайдбар тут уже гамбургер, дело в самой таблице → нужна адаптивная таблица / scroll-контейнер).
  • F2: строка табов списка страниц («Recently updated / Favorites / Created by me») обрезается справа на 390px.
    Оба — отдельная адаптивная работа по узким вьюпортам, не входит в PR #292 (там только collapse сайдбара в drawer <992px, что уже верифицировано).
Дополнение к #291 (мобайл 390px, из повторного web-UI прогона): подтверждено, что помимо планшетного overlay (фикс в PR #292) остаются мобильные остатки: - **F1:** таблица `/settings/members` (~600px) шире 390px — колонки Role/actions уходят за край без явного горизонт-скролла (сайдбар тут уже гамбургер, дело в самой таблице → нужна адаптивная таблица / scroll-контейнер). - **F2:** строка табов списка страниц («Recently updated / Favorites / Created by me») обрезается справа на 390px. Оба — отдельная адаптивная работа по узким вьюпортам, не входит в PR #292 (там только collapse сайдбара в drawer <992px, что уже верифицировано).
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: vvzvlad/gitmost#291