diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx index cca3cd2..ea650d9 100644 --- a/frontend/src/pages/LoginPage.tsx +++ b/frontend/src/pages/LoginPage.tsx @@ -70,6 +70,10 @@ export function LoginPage() { Регистрация + + Зайти как гость + Гость +
Регистрация + + Зайти как гость + Гость +

Создать аккаунт

diff --git a/frontend/src/styles/auth.css b/frontend/src/styles/auth.css index e561ca3..c329580 100644 --- a/frontend/src/styles/auth.css +++ b/frontend/src/styles/auth.css @@ -104,6 +104,11 @@ } .tab.is-active { background: var(--color-surface); color: var(--color-ink-700); font-weight: 600; box-shadow: var(--shadow-sm); } +/* Короткая подпись вкладки «Зайти как гость» — на узком экране (см. @media + ниже) длинный вариант переносится на 2 строки и делает вкладку выше + соседних; та же схема, что у «Мини-окно»/«Мини» в RoomToolbar.tsx/room.css. */ +.tab .label-short { display: none; } + .field { margin-bottom: var(--space-5); } .field label { display: block; font: var(--text-body); font-weight: 600; color: var(--color-ink-900); margin-bottom: var(--space-2); } .input-wrap { position: relative; display: flex; align-items: center; } @@ -289,4 +294,13 @@ .stat-glass { flex-basis: 100%; } .form-panel { padding: var(--space-6) var(--space-4) var(--space-10); } + + /* Три вкладки (Вход/Регистрация/Зайти как гость) на ширину 375/360px в + исходный `width: fit-content` не помещаются — растягиваем группу на + всю ширину блока и даём каждой вкладке одинаковую долю вместо + ужимания по контенту, иначе текст «Регистрация» переносится. */ + .tabs { width: 100%; } + .tab { flex: 1; justify-content: center; padding: 8px 6px; font-size: 13px; } + .tab .label-full { display: none; } + .tab .label-short { display: inline; } }