From 975763a3a62b466f4baaf591175d2056286d6e30 Mon Sep 17 00:00:00 2001
From: Max Ronzhin <m.ronzhin@ssphera.ru>
Date: Tue, 28 Jul 2026 04:23:10 +0300
Subject: [PATCH] =?UTF-8?q?fix(room):=20=D0=BA=D1=80=D1=83=D0=B3=D0=BB?=
 =?UTF-8?q?=D0=B0=D1=8F=20=D0=B8=D0=BA=D0=BE=D0=BD=D0=BA=D0=B0=20=D1=83?=
 =?UTF-8?q?=D1=87=D0=B0=D1=81=D1=82=D0=BD=D0=B8=D0=BA=D0=B0=20=D0=B2=D0=BC?=
 =?UTF-8?q?=D0=B5=D1=81=D1=82=D0=BE=20=D1=8D=D0=BB=D0=BB=D0=B8=D0=BF=D1=81?=
 =?UTF-8?q?=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Размер аватара при выключенной камере считался как width/height в процентах
от РАЗНЫХ сторон плитки, а круглым `.avatar` делает только border-radius —
на неквадратной плитке (то есть почти всегда) получался эллипс. Плюс
max-*: 96px не давал иконке вырасти на большой плитке фокуса.

Размер теперь берётся от узкой стороны плитки через container-запросы:
контейнером объявлен .lk-participant-placeholder (он position: absolute с
inset: 0, то есть повторяет плитку и уже имеет обе размерности), аватар —
width в cqmin с aspect-ratio: 1. Крупная плитка — 50cqmin, миниатюры
карусели — во всю узкую сторону минус 5px с каждого края.

Контейнер именно на placeholder-обёртке, а не на самой плитке: size
containment на плитке отрезал бы её содержимое (видео, метаданные) от
влияния на авторазмер.
---
 frontend/src/styles/room.css | 47 ++++++++++++++++++++++++++++++------
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/frontend/src/styles/room.css b/frontend/src/styles/room.css
index 576c942..e7894ae 100644
--- a/frontend/src/styles/room.css
+++ b/frontend/src/styles/room.css
@@ -518,17 +518,50 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
 }
 .room-pip-placeholder svg { width: 48px; height: 48px; color: var(--color-room-text-tertiary); }
 
-/* ---------- Аватар вместо иконки-заглушки при выключенной камере ---------- */
+/* ---------- Аватар вместо иконки-заглушки при выключенной камере ----------
+ * Размер считается от УЗКОЙ стороны плитки, а не от ширины и высоты по
+ * отдельности. Раньше здесь было `width: 40%; height: 40%` — проценты от
+ * РАЗНЫХ сторон, а круглым `.avatar` делает только `border-radius: 50%`
+ * (shell.css), поэтому на неквадратной плитке (а они почти всегда такие)
+ * получался эллипс. Плюс `max-*: 96px` не давал иконке вырасти на большой
+ * плитке фокуса.
+ *
+ * Механика: контейнером container-запросов делаем `.lk-participant-placeholder`
+ * — блок библиотеки, который `position: absolute; inset: 0`, то есть в
+ * точности повторяет плитку и уже имеет обе размерности (обязательное условие
+ * для `container-type: size`). Контейнер именно на нём, а не на самой
+ * `.lk-participant-tile`: `container-type: size` включает size containment, и
+ * на плитке он отрезал бы её содержимое (видео, метаданные) от влияния на
+ * авторазмер — на placeholder-обёртке внутри ничего, кроме аватара, нет,
+ * ломать нечему.
+ *
+ * `cqmin` — минимум из ширины и высоты контейнера, буквально «узкая сторона»:
+ *   - основная (крупная) плитка — 50cqmin, примерно половина плитки;
+ *   - плитки карусели — во всю узкую сторону минус отступ 5px с каждого края.
+ * `aspect-ratio: 1` + `height: auto` гарантируют круг при любой форме плитки:
+ * диаметр никогда не больше меньшей стороны, дальше иконка уменьшается
+ * пропорционально вместе с плиткой. `min-width: 32px` оставлен — на совсем
+ * крошечной плитке инициалы должны оставаться читаемыми (сжатие плитки ниже
+ * этого порога и так означает, что показывать там нечего).
+ */
+.lk-participant-tile .lk-participant-placeholder {
+  container-type: size;
+}
 .room-tile-avatar {
-  width: 40%;
-  height: 40%;
+  width: 50cqmin;
+  height: auto;
+  aspect-ratio: 1;
   min-width: 32px;
-  min-height: 32px;
-  max-width: 96px;
-  max-height: 96px;
-  font-size: clamp(12px, 3vw, 28px);
+  min-height: 0;
+  max-width: none;
+  max-height: none;
+  font-size: clamp(12px, 20cqmin, 44px);
   font-weight: 700;
 }
+.lk-carousel .room-tile-avatar {
+  width: calc(100cqmin - 10px);
+  font-size: clamp(12px, 34cqmin, 28px);
+}
 
 .room-loader, .room-error {
   display: flex;