Skip to content

fix: наложение элементов на узких экранах (topbar, поток) - #10

Open
derb1rd wants to merge 2 commits into
mainfrom
fix/mobile-topbar-stream-overlap
Open

derb1rd wants to merge 2 commits into
mainfrom
fix/mobile-topbar-stream-overlap

Conversation

@derb1rd

@derb1rd derb1rd commented Jul 2, 2026

Copy link
Copy Markdown
Owner

Проблема

На узких экранах (< 560px, телефоны) элементы интерфейса не помещались и перекрывали друг друга/пропадали:

  1. .topbar не переносился — brand-sub («INSPECTOR · 3-PANE») наезжал на строку поиска, статус подключения обрезался справа.
  2. .stream-head / .stream-row используют фиксированные px-колонки (минимум ~446px без message) — при узкой левой панели это не влезает в viewport телефона, колонки TIMESTAMP/SOURCE вылезают за край.
  3. (добавлено после ревью) При добавлении файлов в сессию список #fileTree полностью схлопывался в 0px высоты и визуально исчезал прямо под dropzone-«выбiralкой». Причина: #fileTree/.src-filters имеют overflow-y: auto и лежат прямой flex-item’ой в .pane-left (display:flex; flex-direction:column) — по спеке flexbox, элемент со scroll-контейнером получает автоматический min-height: 0, поэтому при нехватке высоты именно он схлопывается первым, а не начинает скроллиться сама .pane-left (у которой уже есть overflow-y:auto для этого случая).
  4. Смежный баг в .file-row: 5 grid-колонок (14px 1fr auto auto auto) — auto-колонки (размер/формат, счётчик ошибок, кнопка ✕) не сжимаются, и на узкой панели имени файла (1fr) не оставалось места вообще (0px, а не эллипсис) — имя файла было невозможно увидеть.

Воспроизведено на 375×812 (см. скриншоты в PR-обсуждении / коммиты).

Фикс

Всё — в web/styles.css:

  • @media (max-width: 560px): .topbar переносится в 2 строки, brand-sub скрывается, левая панель сужена до 200px, .stream-head/.stream-row теряют колонки TIMESTAMP/SOURCE.
  • .file-tree и .src-filters получили flex-shrink: 0 — теперь они не схлопываются, а при нехватке места скроллится вся .pane-left, как и задумано.
  • На ≤560px .file-row получил grid-template-columns: 14px minmax(0,1fr) minmax(0,48px) auto, счётчик ошибок скрыт, .f-meta обрезается эллипсисом — имя файла теперь всегда видно (при нехватке места — обрезано «…», а не пропадает).

Существующие брейкпоинты (1100px drawer-инспектор, 760px breadcrumb/kbd) не менялись.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant