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:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user