diff --git a/frontend/src/styles/room.css b/frontend/src/styles/room.css index 1a548bc..dc1543c 100644 --- a/frontend/src/styles/room.css +++ b/frontend/src/styles/room.css @@ -605,13 +605,18 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; } .chat-emoji-wrap .chat-emoji-trigger:disabled { opacity: 0.5; cursor: default; } /* 5 колонок × 6 строк — ровно 30 эмодзи в EMOJI_OPTIONS (ChatPanel.tsx), без - неполной последней строки. */ + неполной последней строки. `max-width` — страховка на случай совсем узкого + viewport: фикс-ширина 220px без потолка сама по себе не переполняется при + текущей раскладке (триггер у левого края панели, попап растёт вправо в + свободное место — проверено геометрией и вживую), но фиксированный размер + совсем без ограничителя — плохая практика сама по себе. */ .chat-emoji-popover { position: absolute; bottom: calc(100% + var(--space-2)); left: 0; z-index: 50; width: 220px; + max-width: calc(100vw - 2 * var(--space-4)); display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; @@ -622,14 +627,30 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; } box-shadow: var(--shadow-room-panel); } .chat-emoji-popover .chat-emoji-option { + /* Настоящая причина переполнения (найдена по факту, не по догадке — + `getBoundingClientRect` показал кнопки 42×42px при колонке ~36px): + `.chat-input-row button` (специфичность 0,1,1) задаёт ВСЕМ кнопкам + формы `width/height: 42px` — это правило круглой кнопки «Отправить», + а кнопки эмодзи в поповере тоже лежат внутри `.chat-input-row` + (см. комментарий выше про гонку специфичности, она чинилась для + цвета в 0.0.19, но не для размера). Без явного `width`/`height` здесь + побеждает тот 42px, сетка на 5 колонок раздувается за 220px попапа, + и последняя колонка уезжает вправо за рамку. `min-width: 0` сам по + себе НЕ помогает — конфликт не в авто-минимуме грида, а в explicit + width, который обязательно нужно перебить явно. */ + width: auto; + height: auto; + min-width: 0; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; + overflow: hidden; background: none; border: none; font-size: 20px; line-height: 1; + white-space: nowrap; border-radius: var(--radius-md); cursor: pointer; }