fix(room): эмодзи-поповер в чате — 5-я колонка вылезала за рамку

Настоящая причина (подтверждена вживую через getBoundingClientRect):
`.chat-input-row button` (стиль круглой кнопки «Отправить», width/height
42px) красил размер и кнопкам эмодзи внутри поповера — они тоже лежат в
.chat-input-row. Сетка на 5 колонок по 42px требовала ~238px при
фиксированной ширине попапа 220px, лишнее уезжало вправо за рамку.
Явные width/height: auto на .chat-emoji-option перебивают унаследованный
размер нужной специфичностью, дальше квадрат считает aspect-ratio от
реальной ширины колонки (~36px). Заодно — max-width на попап и
overflow:hidden/white-space:nowrap на кнопки как общая страховка от
переполнения на очень узких экранах.
This commit is contained in:
2026-08-03 01:56:27 +03:00
parent 6b9d0b833e
commit 2be799b19d

View File

@@ -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;
}