fix(admin): заголовок, подзаголовок и вкладки вылезали за экран на мобильном

.page-head h1 (общий заголовок оболочки) — тот же баг с фиксированным
кеглем 34px, что и в auth.css, чинится тем же способом (clamp), лечит заодно
любую другую длинную шапку на страницах оболочки. В админке дополнительно:
поясняющий текст под заголовком скрыт на мобильном (не несёт функции), 4
вкладки переносятся в 2 ряда вместо горизонтального оверфлоу всей страницы.
This commit is contained in:
2026-07-26 04:20:01 +03:00
parent 84e2ab8756
commit ac9832c5a1
2 changed files with 19 additions and 0 deletions

View File

@@ -14,6 +14,23 @@
*/
.admin-page .section-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
/* Мобильная ширина: 4 вкладки не помещаются в один ряд (см. аудит) —
переносим в 2 ряда по 2, а необязательный поясняющий текст под заголовком
прячем, чтобы не съедал экран (сам заголовок тянет .page-head h1 из
lobby.css). */
@media (max-width: 640px) {
.admin-page .page-head p { display: none; }
.admin-page .section-tabs { flex-wrap: wrap; }
/* Таблица «Пользователи» — на мобильном оставляем только колонку
«Пользователь»; роль/команда/блокировка редактируются через карточку
профиля (открывается кликом по имени, см. AdminUserProfileDialog). */
.admin-page .users-table th:not(:first-child),
.admin-page .users-table td:not(:first-child) {
display: none;
}
}
.admin-page .section-tab { padding: 10px 4px; margin-right: var(--space-6); background: none; border: none; border-bottom: 2px solid transparent; font: var(--text-body-lg); font-weight: 600; color: var(--color-ink-500); cursor: pointer; }
.admin-page .section-tab:hover { color: var(--color-ink-900); }
.admin-page .section-tab.is-active { color: var(--color-ink-700); border-color: var(--color-accent-active); }