From 826b7639b1786aad7311792f4bd45ea62dc5304a Mon Sep 17 00:00:00 2001
From: Max Ronzhin <m.ronzhin@ssphera.ru>
Date: Sun, 2 Aug 2026 04:57:39 +0300
Subject: [PATCH] =?UTF-8?q?fix(chat):=20=D1=81=D0=BF=D0=B5=D1=86=D0=B8?=
 =?UTF-8?q?=D1=84=D0=B8=D1=87=D0=BD=D0=BE=D1=81=D1=82=D1=8C=20CSS=20=D1=8D?=
 =?UTF-8?q?=D0=BC=D0=BE=D0=B4=D0=B7=D0=B8-=D0=BF=D0=BE=D0=BF=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=B5=D1=80=D0=B0=20+=20=D1=81=D0=B5=D1=82=D0=BA=D0=B0=206?=
 =?UTF-8?q?=C3=975?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Кнопка эмодзи и все кнопки внутри поповера лежат в DOM внутри
.chat-input-row (форма отправки) — той же формы, что и круглая зелёная
кнопка «Отправить» (.chat-input-row button, специфичность 0,1,1). Голого
класса .chat-emoji-trigger/.chat-emoji-option (0,1,0) для победы над этим
правилом не хватало: все кнопки поповера красились в зелёный независимо от
порядка объявления в файле — оттуда и «поплывший» вид после добавления
коня, дело было не в самом коне. Каждый селектор уточнён родительским
классом (.chat-emoji-wrap/.chat-emoji-popover), чтобы обойти гонку
специфичности.

Заодно сетка приведена к ровным 5 колонкам × 6 строкам — добавлены
🦾 🚀 🦞 💯 🤷‍♂️, теперь 30 эмодзи без неполной последней строки.
---
 frontend/src/components/room/ChatPanel.tsx |  6 ++--
 frontend/src/styles/room.css               | 33 +++++++++++++++-------
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/room/ChatPanel.tsx b/frontend/src/components/room/ChatPanel.tsx
index 6054dc2..c99ffb8 100644
--- a/frontend/src/components/room/ChatPanel.tsx
+++ b/frontend/src/components/room/ChatPanel.tsx
@@ -6,13 +6,15 @@ import { useModalDismiss } from '@/hooks/useModalDismiss'
 
 /**
  * Небольшой собственный набор популярных эмодзи — вместо библиотеки-пикера на
- * сотни килобайт ради десятка кнопок в поповере.
+ * сотни килобайт ради десятка кнопок в поповере. Ровно 30 штук (6×5 —
+ * `.chat-emoji-popover` в room.css рассчитан на эту сетку без остатка;
+ * добавляя/убирая эмодзи, держи кратность 5).
  */
 const EMOJI_OPTIONS = [
   '😀', '😂', '😊', '😉', '😍', '🤔', '😅', '😢',
   '😮', '😎', '🙌', '👍', '👎', '👏', '🙏', '❤️',
   '🔥', '🎉', '✅', '❌', '⚠️', '💡', '👀', '🤝',
-  '🐎',
+  '🐎', '🦾', '🚀', '🦞', '💯', '🤷‍♂️',
 ]
 
 interface ChatPanelProps {
diff --git a/frontend/src/styles/room.css b/frontend/src/styles/room.css
index 29c4198..9be629b 100644
--- a/frontend/src/styles/room.css
+++ b/frontend/src/styles/room.css
@@ -526,8 +526,16 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
 }
 .chat-input-row button:disabled { opacity: 0.5; cursor: default; }
 
+/* Триггер и опции эмодзи-поповера лежат внутри `.chat-input-row` (форма
+   отправки) — тот же контейнер, что у круглой зелёной кнопки «Отправить»
+   (`.chat-input-row button`, специфичность 0,1,1). Голого класса
+   (`.chat-emoji-trigger`/`.chat-emoji-option`, 0,1,0) для победы над ней не
+   хватает — ЛЮБАЯ кнопка внутри формы (включая кнопки в самом поповере,
+   он тоже в этом поддереве) красилась в зелёный независимо от порядка
+   правил в файле. Каждый селектор ниже уточнён родительским классом ровно
+   затем, чтобы обойти именно эту гонку специфичности. */
 .chat-emoji-wrap { position: relative; display: flex; flex-shrink: 0; }
-.chat-emoji-trigger {
+.chat-emoji-wrap .chat-emoji-trigger {
   width: 42px;
   height: 42px;
   border-radius: 50%;
@@ -539,35 +547,40 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
   justify-content: center;
   cursor: pointer;
 }
-.chat-emoji-trigger:hover { color: var(--color-room-text-primary); }
-.chat-emoji-trigger.is-open { color: var(--color-room-mic-on); border-color: var(--color-room-speaker-ring); }
-.chat-emoji-trigger:disabled { opacity: 0.5; cursor: default; }
+.chat-emoji-wrap .chat-emoji-trigger:hover { color: var(--color-room-text-primary); }
+.chat-emoji-wrap .chat-emoji-trigger.is-open { color: var(--color-room-mic-on); border-color: var(--color-room-speaker-ring); }
+.chat-emoji-wrap .chat-emoji-trigger:disabled { opacity: 0.5; cursor: default; }
 
+/* 5 колонок × 6 строк — ровно 30 эмодзи в EMOJI_OPTIONS (ChatPanel.tsx), без
+   неполной последней строки. */
 .chat-emoji-popover {
   position: absolute;
   bottom: calc(100% + var(--space-2));
   left: 0;
   z-index: 50;
-  width: 224px;
+  width: 220px;
   display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 2px;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 4px;
   padding: var(--space-3);
   border-radius: var(--radius-lg);
   border: 1px solid var(--color-room-tile-border);
   background: var(--color-room-surface-raised);
   box-shadow: var(--shadow-room-panel);
 }
-.chat-emoji-option {
+.chat-emoji-popover .chat-emoji-option {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background: none;
   border: none;
   font-size: 20px;
   line-height: 1;
-  padding: 6px;
   border-radius: var(--radius-md);
   cursor: pointer;
 }
-.chat-emoji-option:hover { background: var(--color-room-tile); }
+.chat-emoji-popover .chat-emoji-option:hover { background: var(--color-room-tile); }
 
 @media (max-width: 900px) {
   .chat-panel {