/* Компактный вид Connector по умолчанию (реестр: docs/CORE-MODS.md). Подмешивается реверс-прокси, образ Element не тронут. Убирается одной строкой в Caddyfile. */ /* Компактность больше НЕ через css-zoom: он смещает всплывающие подсказки и меню (координаты считаются без учёта масштаба). Теперь масштаб задаёт ярлык Connector.cmd (--force-device-scale-factor) или сам человек: Ctrl и минус - браузер запоминает на сайт. */ /* Раскладка композера как в Telegram: скрепка слева от поля ввода. ОПОРА И ЕЁ СТРАХОВКА (находка 7 ультракода, 17.09.2026). Единственный нехэшированный признак кнопки вложения у этой сборки Element - её переводная метка aria-label: класс у неё модульный с хэшем (_icon-button_1215g_8), data-testid нет (снято с живой страницы kosmetika-diag.mjs). Метка может измениться при обновлении Element или словаря - тогда скрепка вернётся на родное место. Раньше сдвиг поля ввода на 40px стоял отдельным правилом БЕЗ опоры и в этом случае оставлял слева пустую дыру во всех чатах. Теперь сдвиг висит на том же признаке через :has() - нет скрепки в строке, нет и сдвига. Замер в пробе kosmetika-check.mjs (контрольный прогон: метку у кнопки убирают - отступ обязан стать 0). */ .mx_MessageComposer_row { position: relative; } .mx_MessageComposer_row [aria-label="Вложение"], .mx_MessageComposer_row [aria-label="Attachment"] { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); } .mx_MessageComposer_row:has([aria-label="Вложение"]) .mx_BasicMessageComposer, .mx_MessageComposer_row:has([aria-label="Attachment"]) .mx_BasicMessageComposer { margin-left: 40px; } /* Порядок левой панели как в Telegram: заголовок, ПОД ним поиск, фильтры, список. Классы у Element хешированные - матчим по кускам, при обновлении Element проверяется скрином (реестр CORE-MODS.md). flex-shrink:0 на трёх верхних блоках - защита от обрезки текста панели фильтров (задача 5а, замер в браузере: .mx_RoomListPanel - flex-контейнер column, все 4 прямых ребёнка (флекс:0 1 auto, т.е. flex-shrink:1 по умолчанию) МОГУТ по спецификации ужиматься ниже своего естественного размера, если контента больше, чем высоты - обычно это останавливает авто-минимум по содержимому (min-height:auto + overflow:visible), но заранее исключаем сам риск явным flex-shrink:0: ужиматься может только список (order 4, flex:1 1 0% - и так не участвует в дележе сжатия из-за flex-basis 0). Живьём обрезку воспроизвести не удалось (замеры на ширинах 320-1440px, высотах 200-900px, мобильном 390px, включая реальный флаг Connector.cmd --force-device-scale-factor=0.85 - везде текст фильтров цел), но правило дешёвое и без побочных эффектов. */ .mx_RoomListPanel > [class*="_header_"] { order: 1; flex-shrink: 0; } .mx_RoomListPanel > div:has([class*="_search_"]) { order: 2; flex-shrink: 0; } .mx_RoomListPanel > div:has([class*="roomListPrimaryFilters"]) { order: 3; flex-shrink: 0; } .mx_RoomListPanel > [class*="_list_"] { order: 4; } /* Кнопка «Все» первой в панели фильтров (задача 5б) - вставляет connector-design.js, вид копирует с родной кнопки (класс живой, не хардкодим хэш). Тут только позиционирование и активное состояние - см. подробный разбор структуры в шапке design.js. */ #cnd-фильтр-все { flex: none; cursor: pointer; } /* СТРОКА ФИЛЬТРОВ ОДНИМ РЯДОМ (замечание владельца 03.09.2026). Что он увидел: таблетки и стрелка раскрытия выглядят разнородно, стрелка стоит отдельной круглой коробкой и не по оси. Что показали числа (проба filtry-vid-check.mjs): видимые таблетки ровные - высота 30, радиус 99px, отступы 4/8, вес 500; а стрелка 28 пикселей, круглая (радиус 50%), со своим фоном и центром на пиксель ниже. То есть чинить надо стрелку и подсветку активной, а не таблетки. Цвета берём ТОКЕНАМИ темы (--cpd-*), а не числами: иначе светлая тема и будущая смена оформления сломают вид. */ [data-testid="primary-filters"] { display: flex; align-items: center; /* одна ось для всего, что стоит в строке */ gap: 6px; } /* стрелка раскрытия - такая же таблетка, а не отдельная коробка */ [data-testid="primary-filters"] > *:not([role="option"]):not(:has([role="option"])) { height: 30px; min-width: 30px; align-self: center; border-radius: 99px; background: transparent; border: 1px solid var(--cpd-color-border-interactive-secondary, #656d77); } /* активная таблетка - акцент продукта, одинаково в обеих темах */ [data-testid="primary-filters"] [role="option"][aria-selected="true"] { background: var(--cpd-color-bg-accent-rest); color: var(--cpd-color-text-on-solid-primary); border-color: transparent; } /* Подпись присутствия (задача 5в): «в сети» / «был(а) в сети N назад». Мелкий приглушённый текст под именем - и в плитке списка, и в шапке диалога (общий класс cnd-присутствие, модификаторы отличают место через второй класс на случай точечной правки). «В сети» - акцентным цветом (как зелёная точка presence у Element), остальное - вторичным серым, как остальные подписи Element. */ .cnd-присутствие { font-size: 12px; line-height: 15px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cnd-присутствие[data-онлайн="true"] { color: var(--cpd-color-text-success-primary, #0dbd8b); } .cnd-присутствие:not([data-онлайн="true"]) { color: var(--cpd-color-text-secondary, #737d8c); } .cnd-присутствие-шапка { font-size: 13px; line-height: 16px; } /* Удалённые исчезают бесследно, как в Telegram (вместе с hideRedactions в element-config.json). CSS добивает краевой случай Element: нерасшифрованное удалённое событие рисует надгробие мимо настройки. Треды не используем, потери доступа к ним нет. */ .mx_EventTile:has(.mx_RedactedBody) { display: none; } /* ------- Телеграм-вид (слой connector-design, реестр CORE-MODS.md) -- */ /* Пузыри сообщений: округление 16px, как в Telegram; у последнего в группе - маленький уголок-«хвостик» со стороны отправителя. Опоры на внутренности Element: data-layout="bubble" и data-self на плитке (покрыто автотестом smoke/design-check.mjs). */ .mx_EventTile[data-layout="bubble"] .mx_EventTile_line { border-radius: 16px !important; } .mx_EventTile[data-layout="bubble"][data-self="true"]:not(:has(+ .mx_EventTile_continuation)):not(:has(+ .cnd-серия)) .mx_EventTile_line { border-bottom-right-radius: 6px !important; } .mx_EventTile[data-layout="bubble"][data-self="false"]:not(:has(+ .mx_EventTile_continuation)):not(:has(+ .cnd-серия)) .mx_EventTile_line { border-bottom-left-radius: 6px !important; } /* Реплай-цитата компактная, как в Telegram: цветная полоска слева, имя и ОДНА строка текста. Заодно чинит наложение: длинная или нерасшифрованная цитата больше не вылезает из пузыря. */ .mx_ReplyChain { margin: 0 0 4px !important; padding: 2px 8px !important; border-left-width: 3px !important; border-radius: 6px; background: rgba(0, 0, 0, 0.045); font-size: 13px; overflow: hidden; } .mx_ReplyChain .mx_ReplyTile { max-height: 40px; overflow: hidden; } .mx_ReplyChain .mx_ReplyTile_sender { font-weight: 600; margin-bottom: 0 !important; } /* в цитате только имя, без мини-аватарки - как в Telegram */ .mx_ReplyChain .mx_ReplyTile_sender .mx_BaseAvatar { display: none; } .mx_ReplyChain .mx_EventTile_body, .mx_ReplyChain .mx_EventTile_content { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Значок шифрования (замочек/предупреждение) не сидит на углу пузыря. Линия пузыря - flex-ряд с переносом: в высоком пузыре (с цитатой) значок попадал в собственный flex-ряд наверху и висел на скруглённом углу. У СВОИХ сообщений слева от пузыря всегда пусто - выносим значок туда и центрируем по вертикали (линия уже position: relative - в ней абсолютно позиционировано время). У чужих оставляем в потоке: там слева аватарка, а значок и так рисуется в строке с текстом. Значок остаётся видимым: это индикатор безопасности, прятать нельзя. */ .mx_EventTile[data-layout="bubble"] .mx_EventTile_line > .mx_EventTile_e2eIcon { align-self: center; top: 0; transform: none; } .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line > .mx_EventTile_e2eIcon { position: absolute; left: -22px; top: 50%; transform: translateY(-50%); } /* Плавность, как в Telegram: мягкие ховеры кнопок и плиток (0.15s) */ /* плитки чатов - это button role="option" в [data-testid="room-list"], их кроет общее правило по button */ button, [role="option"], [role="menuitem"], [role="treeitem"], .mx_AccessibleButton { transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease; } /* появление нового сообщения - мягкий подъём */ @keyframes cnd-появление { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .mx_EventTile[data-layout="bubble"] .mx_EventTile_line { animation: cnd-появление 0.18s ease-out; } /* Профиль пользователя (правая панель) в телеграмном виде: крупная аватарка сверху, жирное имя, статус, действия списком. Опора: классы mx_UserInfo Element (автотест design-check.mjs). */ .mx_UserInfo .mx_UserInfo_avatar { margin-top: 20px; } .mx_UserInfo .mx_UserInfo_avatar .mx_BaseAvatar { --cpd-avatar-size: 120px !important; } .mx_UserInfo .mx_UserInfo_profile h1 { font-size: 20px !important; font-weight: 700 !important; margin: 10px 0 2px; } .mx_UserInfo .mx_UserInfo_profileStatus { font-size: 13px; color: var(--cpd-color-text-secondary, #656d76); } .mx_UserInfo .mx_UserInfo_profile_mxid { font-size: 13px; } /* Скругление пунктов действий («Отправить сообщение», «Поделиться профилем», «Игнорировать»). Опора СТРУКТУРНАЯ, без хэшей (находка 8 ультракода, 17.09.2026): раньше пункты ловились по куску модульного класса [class*="_interactive_"] - имя чужого модуля compound-web, которое исчезнет при первом же его переименовании, и тогда скругление молча пропадёт. Снято с живой страницы (kosmetika-diag.mjs): пункты действий - это РОВНО прямые дети .mx_UserInfo_container (4 штуки), а соседние кнопки лежат глубже, в своих обёртках: копирование адреса в .mx_CopyableText (радиус 50%), «Подтвердить пользователя» в .mx_UserInfo_container_verifyButton (радиус-таблетка 9999px). Поэтому дочерний комбинатор задевает ровно нужные кнопки и не трогает круглую и таблетку. Замер в пробе kosmetika-check.mjs - и на самих пунктах, и на двух соседних кнопках, чтобы правило не расползлось. */ .mx_UserInfo .mx_UserInfo_container > button { border-radius: 8px; } /* Сводки, где ТОЛЬКО удаления - бесследно прячутся. Развёрнутая группа из одних надгробий (сводочной строки нет): прячем целиком CSS-ом. Свёрнутую строку «удалил(а) N сообщения(-й)» находит по тексту connector-design.js и вешает класс cnd-удаления. Комбинированные сводки (с приглашениями/входами) не трогаем. */ li.mx_GenericEventListSummary:not(:has(.mx_GenericEventListSummary_summary)):not(:has(.mx_EventTile:not(:has(.mx_RedactedBody)))) { display: none; } li.cnd-удаления { display: none !important; } /* кнопка «назад» - существует в DOM только на мобильном (см. JS), но на всякий случай прячем по умолчанию вне мобильного брейкпоинта */ #cnd-назад { display: none; } /* ------- Плотность ленты и серии сообщений (задачи 1-4 брифа) ------- Владелец сравнил ленту с Telegram: «аватар у каждого сообщения, лишний воздух, не видно времени». Ниже - четыре правки; парная JS-часть (класс cnd-серия на плитке продолжения серии и класс cnd-личный на корне комнаты 1:1) - connector-design.js. Автотест: stack2/smoke/tglook-check.mjs. Замеры на стенде ДО правки (1440x900, короткое сообщение «м2»): высота пузыря 40px, шаг между сообщениями серии 42px, родные поля линии пузыря 10px 60px 10px 10px, переменные Element --EventTile_bubble-margin-inline-start 49px / -end 60px, аватар 38px (свой - справа, в правом жёлобе), галочки прочтения .mx_ReadReceiptGroup - полоса шириной 34px у самого края окна (замер пробой 24.08.2026: жёлоб 1406..1440, значки 1410..1436). Эталон Telegram: высота короткого пузыря 30-33px, зазор внутри серии 2px, время внутри пузыря справа снизу. */ /* 1. Плотность: вертикальные поля пузыря 6px вместо родных 10px. Правим ТОЛЬКО padding-top/bottom - правые 60px Element держит под время ВНУТРИ пузыря (замер: .mx_MessageTimestamp - position:absolute, ширина 38px, живёт ровно в этом резерве; тронешь правое поле - время наедет на текст). Служебные строки (.mx_EventTile_info) и карточки-плашки (.mx_EventTile_bubbleContainer, «Шифрование включено») не трогаем: у них своя вёрстка и нулевые поля линии. */ .mx_EventTile[data-layout="bubble"]:not(.mx_EventTile_info):not(.mx_EventTile_bubbleContainer) .mx_EventTile_line { padding-top: 6px !important; padding-bottom: 6px !important; } /* 2. Своего аватара в ленте нет вовсе (в Telegram его нет никогда). Правый жёлоб возвращаем ШТАТНОЙ переменной Element, а не отрицательными полями: 60px резервировались под аватар 38px. ЛОВУШКА: :not(.mx_EventTile_info) обязателен - у служебных строк («сменил имя», «поставил аватар») под тем же классом .mx_EventTile_avatar лежит иконка 14x14, без этого условия она пропадёт вместе с аватарами. ВТОРАЯ ЛОВУШКА, поймана замером 24.08.2026 (проба scratchpad/tglook/proba-galochki.mjs, снимки проба-галочки-*.png): в том же правом жёлобе Element держит галочки прочтения. Замер: .mx_ReadReceiptGroup - position:absolute, inset-inline-end:-78px, ширина 34px, и её правый край всегда равен «правый край плитки + 60px». Значит при жёлобе 26px полоса галочек уезжает ЗА край окна (замерено: 1440..1474 при ширине окна 1440) - кто прочитал своё сообщение, не видно вовсе. Поэтому жёлоб ужимаем только до 34px и ровно на столько же двигаем полосу галочек обратно: -78px + 26px = -52px. Итог замера: пузырь кончается на 1400, галочки 1406..1440 - целиком на экране и на время не наезжают. Проверку «значки прочтения целиком в окне, не пересекаются со временем и с пузырём» держит tglook-check.mjs. */ .mx_EventTile[data-layout="bubble"][data-self="true"]:not(.mx_EventTile_info) .mx_EventTile_avatar { display: none !important; } .mx_EventTile[data-layout="bubble"][data-self="true"]:not(.mx_EventTile_info) { --EventTile_bubble-margin-inline-end: 34px; } .mx_EventTile[data-layout="bubble"][data-self="true"]:not(.mx_EventTile_info) .mx_ReadReceiptGroup { inset-inline-end: -52px !important; } /* 3. Личный чат 1:1 - аватаров в ленте нет вовсе, как в Telegram. Признак личного чата ставит JS классом cnd-личный на корне комнаты (.mx_RoomView): «ровно двое joined-участников». Левый жёлоб под чужой аватар возвращаем той же штатной переменной Element. */ .cnd-личный .mx_EventTile[data-layout="bubble"]:not(.mx_EventTile_info) .mx_EventTile_avatar { display: none !important; } .cnd-личный .mx_EventTile[data-layout="bubble"][data-self="false"]:not(.mx_EventTile_info) { --EventTile_bubble-margin-inline-start: 12px; } /* 4. Серия сообщений одного человека - одним блоком, даже если между сообщениями пауза больше 5 минут. Родную склейку Element (mx_EventTile_continuation) менять нельзя, а её порог в 5 минут зашит в код: в живой переписке это и давало «шесть сообщений - шесть кружков». Класс cnd-серия вешает JS-слой на каждом тике, здесь - только вид: повторный аватар и повторное имя автора прячем, зазор 2px (как внутри родной серии). Плашка роли (cnr-плашка, чужой слой connector-roles.js) живёт ВНУТРИ .mx_DisambiguatedProfile - у первого сообщения серии она остаётся на месте, прячется только повтор. */ .mx_EventTile.cnd-серия[data-layout="bubble"] .mx_EventTile_avatar { display: none !important; } .mx_EventTile.cnd-серия[data-layout="bubble"] > .mx_DisambiguatedProfile { display: none !important; } .mx_EventTile.cnd-серия[data-layout="bubble"] { margin-top: 2px !important; } /* ===================== Мобильная раскладка (<=780px) ===================== Родной Element Web НЕ адаптивный: проверено (curl bundle.css) - в нём вообще нет ни одного @media (max-width). На узком экране сплит-пейн списка чатов и открытой комнаты (библиотека react-resizable-panels) не умеет схлопнуться в одну колонку сам - панель списка получает flex-basis 0 и рендерится шириной 0, а открытая комната зажата в оставшиеся ~300px. Ниже - наш минимальный слой «одна панель разом»: список (и рельс пространств при нём) на весь экран, пока комната не открыта; открытая комната - на весь экран, список и рельс прячем. Взамен рельса - наша кнопка «назад» в шапке открытой комнаты (JS: connector-design.js, ведёт на #/home). Опоры на внутренности Element (проверять при каждом обновлении): - id="left-panel" - собственный, стабильный id Element на панели списка внутри сплит-пейна (react-resizable-panels); её сосед по группе - панель с открытой комнатой (несёт .mx_RoomView_wrapper) - .mx_Separator - ручка ресайза сплит-пейна (не нужна с тачем) - header.mx_RoomHeader - шапка открытой комнаты (не хэшированный класс, стабилен) - сюда JS вставляет кнопку «назад» - .mx_EventTile[data-layout="bubble"] .mx_EventTile_line - родной max-width:70% Element - на колонке ~300px даёт пузырь ~175px (перенос по одному слову/букве); на мобильном отдаём пузырю больше ширины - .mx_AuthPage_modal - общая обёртка модалки Element для экрана приветствия (.mx_Welcome), формы входа и заверения устройства (.mx_CompleteSecurityBody) - у части экранов фиксированная ширина в px шире 390px, обёртка .mx_AuthPage только со скроллом (overflow-x:auto), из-за чего край обрезан визуально - .mx_EncryptionCard (не хэшированный класс) - карточка «Подтвердите свою личность»/«Заверьте этот сеанс» ВНУТРИ .mx_CompleteSecurityBody: у неё СОБСТВЕННАЯ фиксированная ширина 600px, не связанная с шириной родителя - .mx_CompleteSecurityBody мы уже сжимали до 100%, но карточка внутри всё равно требовала 600px и вылезала (ground-truth: diag-confirm.mjs, right:632 при viewport 390 - заголовок и кнопки обрезаны по живому скрину m2-1-confirm-dialog.png) - .mx_FacePile (не хэшированный класс) - стопка аватарок «кто в чате» в шапке комнаты; на узкой шапке (иконки звонка/тредов/О чате уже занимают место) стопка вылезала за правый край viewport на ~13px и обрезалась ровно посередине буквы (нашли скриптом diag-header2.mjs: right края аватарок 391/403px при 390px viewport). Кнопка «О чате» рядом даёт тот же список участников - на мобильном стопка просто лишняя, прячем Автотест: stack2/smoke/mobile-check.mjs */ @media (max-width: 780px) { .mx_Separator { display: none !important; } /* рельс пространств на мобильном не нужен вовсе (Spaces.allRoomsInHome держит все чаты в одном списке) - на однопанельном экране ему просто негде быть: и на экране списка съедал ~70px от «во всю ширину», и на экране открытой комнаты не сворачивался сам собой. Прячем безусловно, на обоих экранах */ .mx_SpacePanel { display: none !important; } #left-panel, #left-panel ~ div:not(.mx_Separator) { flex: 1 1 100% !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; } /* комната открыта - список прячем, комната на весь экран. ВАЖНО: маркер - .mx_RoomView_body (лента+композер), НЕ .mx_RoomView_wrapper. Ground-truth (diag-splitpane3.mjs): .mx_RoomView_wrapper есть в DOM ДАЖЕ на экране приветствия без открытой комнаты (общая обёртка правой панели) - селектор на нём считал «комната открыта» всегда, и список чатов был недостижим (ровно баг из независимого обзора). .mx_RoomView_body рендерится только у реально открытой комнаты - проверено: на /#/home его нет, на /#/room/... есть. */ #left-panel:has(~ div .mx_RoomView_body) { display: none !important; } /* комнаты нет - список на весь экран, соседнюю панель (домашний экран) прячем: на мобильном список - главная навигация */ #left-panel:not(:has(~ div .mx_RoomView_body)) ~ div:not(.mx_Separator) { display: none !important; } /* кнопка «назад к списку» в шапке открытой комнаты - вставляет connector-design.js; тут только внешний вид */ #cnd-назад { display: flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; margin-right: 4px; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--cpd-color-icon-primary, #17191c); } #cnd-назад:hover { background: var(--cpd-color-bg-action-secondary-hovered, #f0f2f5); } /* вход в профиль и настройки на телефоне - взамен спрятанного рельса (07.09.2026, снимок владельца «нет навигации»). Вставляет connector-design.js, тут только вид. margin-left:auto прижимает кнопку к правому краю шапки списка. */ #cnd-меню-человека { display: flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; margin-left: auto; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--cpd-color-icon-primary, #17191c); } #cnd-меню-человека:hover { background: var(--cpd-color-bg-action-secondary-hovered, #f0f2f5); } /* Окно настроек на телефоне: рамка и содержимое влезают в экран. Замер 07.09 на экране 390: окно занимало 52..418 - 28 пикселей за правым краем, а внутри блоки шириной 480 уезжали до 600, так что аватар, подписи и кнопки были обрезаны по живому. В эту беду упёрлись сразу, как дали телефону вход в настройки. ТОЛЬКО ОКНО НАСТРОЕК, а не все окна Element. Сначала правило было написано на .mx_Dialog вообще - и сломало панель поиска (проба mobile-check.mjs: «панель поиска Ctrl+K вылезает за край», ширина 1053 при экране 390). Проверено снятием блока: без него та красная строка исчезает. Общее правило дешевле писать и дороже отлаживать. Селектор длинный НАРОЧНО: короткий (.mx_Dialog_fixedWidth) браузер видел, но у Element на то же место есть правило длиннее и оно перевешивало - окно не менялось ни на пиксель. Держит замер mobile-navigatsiya-check.mjs. */ .mx_Dialog_wrapper .mx_Dialog .mx_UserSettingsDialog, .mx_Dialog_wrapper .mx_UserSettingsDialog.mx_Dialog_fixedWidth { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .mx_Dialog_wrapper .mx_UserSettingsDialog * { /* ОГРАНИЧИВАЕМ ПО ЭКРАНУ, А НЕ ПО РОДИТЕЛЮ. Сначала стояло max-width:100% - и не помогло: сто процентов считаются от родителя, а родитель сам прибит к 480 пикселям, так что предел получался тем же 480. Ширина экрана - единственная опора, которая здесь не врёт. */ max-width: calc(100vw - 80px) !important; } /* min-width:0 - лекарство от вылезающих flex-колонок, но ТОЛЬКО контейнерам. Поставил его всему подряд - кнопки сплющило в кружки с обрезанными надписями («астройки аккаунт»), видно на снимке. */ .mx_Dialog_wrapper .mx_UserSettingsDialog div, .mx_Dialog_wrapper .mx_UserSettingsDialog section, .mx_Dialog_wrapper .mx_UserSettingsDialog main { min-width: 0 !important; } /* пузырь сообщения шире на узкой колонке - иначе перенос по слову/букве */ .mx_EventTile[data-layout="bubble"] .mx_EventTile_line { max-width: 92% !important; } /* стопка аватарок «кто в чате» в шапке комнаты вылезала за правый край и обрезалась (см. опору выше) - на мобильном прячем, «О чате» рядом даёт тот же список участников */ header.mx_RoomHeader .mx_FacePile { display: none !important; } /* имя чата в шапке ужималось до трёх букв («Те...»), хотя место было. Ground-truth (diag-header3/diag-header4.mjs, viewport 390): .mx_RoomHeader_info - content-box с padding-right: 52px, то есть из 114px обёртки под содержимое остаётся 62px, и строке имени достаётся 40px. Эти 52px Element резервирует под стопку аватарок (.mx_FacePile), а её мы на мобильном прячем (см. правило выше) - место простаивало. Отдаём его имени: замер после правки - строка имени 92px вместо 40px. */ header.mx_RoomHeader .mx_RoomHeader_info { padding-right: 0 !important; width: 100% !important; box-sizing: border-box !important; } header.mx_RoomHeader .mx_RoomHeader_truncated { flex: 1 1 auto !important; min-width: 0 !important; } /* модалки Element (приветствие/вход/заверение устройства) шире экрана - обрезаны справа, доступны только скроллом, которого никто не ждёт */ .mx_AuthPage_modal, .mx_AuthPage_modalContent, .mx_AuthPage_modal .mx_Dialog_border, .mx_Welcome, .mx_CompleteSecurityBody { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .mx_AuthPage { overflow-x: hidden !important; } /* карточка внутри модалки заверения устройства - см. опору выше, собственная ширина 600px рвёт узкий экран независимо от родителя */ .mx_EncryptionCard { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* ПЕРВЫЙ ЭКРАН ВХОДА на телефоне (найдено приёмкой 23.08.2026 глазами и замером): карточка приветствия «Добро пожаловать в Connector» имеет собственную ширину 500px и внутренние поля 48px, поэтому на 360-390px заголовок и все три кнопки («Войти по QR-коду», «Войти логином и паролем», «Создать учётную запись») уезжают за правый край экрана на 50-80px и просто обрезаны - человек видит половину кнопки. Это не наш слой (проверено: с выключенной нашей CSS обрез тот же) и не наши правки MSC4108, а верстка самого Element: адаптивного правила у этого экрана нет вовсе. Опоры - только НЕхэшированные классы Element: .mx_AuthPage_modalContent (контейнер по ширине экрана) и .mx_Welcome (сама карточка); стеклянная обёртка между ними идёт с хэшированным классом, поэтому берём её структурно, прямым потомком контейнера. */ .mx_AuthPage_modalContent > * { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .mx_Welcome, .mx_DefaultWelcome, .mx_DefaultWelcome_buttons { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .mx_Welcome { padding-left: 16px !important; padding-right: 16px !important; } /* сами кнопки заданы жёсткой шириной 380px (класс кнопки хэшированный - берём их как прямых потомков контейнера кнопок) */ .mx_DefaultWelcome_buttons > a, .mx_DefaultWelcome_buttons > button { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* быстрый поиск (Ctrl+K) и подобные плавающие панели - тоже родом из десктопной ширины, обрезаны без переноса на узком экране */ .mx_Dialog_fixedWidth, .mx_SpotlightDialog { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; } } /* Служебная кухня Пульта не показывается людям (задача 7, реестр CORE-MODS.md). Класс вешает connector-design.js, разбирая САМИ события, а не их текст: вход-выход служебной учётки, смены прав, где тронуты только служебные учётки, и переименования от миграции ролей. Сообщения людей этим правилом не затрагиваются никогда. */ .cnd-служебное { display: none !important; }