From ddde6e07d73a2d3cc3be9f873fb604348eca595c Mon Sep 17 00:00:00 2001 From: Andrey Date: Sun, 12 Jul 2026 04:23:11 +0300 Subject: [PATCH] =?UTF-8?q?fix(calls):=20=D1=86=D0=B5=D0=BD=D1=82=D1=80?= =?UTF-8?q?=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=B8=D0=BD?= =?UTF-8?q?=D0=B8=D1=86=D0=B8=D0=B0=D0=BB=D0=BE=D0=B2=20=D0=B8=20full-scre?= =?UTF-8?q?en=20=D0=B7=D0=B2=D0=BE=D0=BD=D0=BE=D0=BA=20=D0=BD=D0=B0=20?= =?UTF-8?q?=D0=BC=D0=BE=D0=B1=D0=B8=D0=BB=D1=8C=D0=BD=D0=BE=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - .hub-call-avatar: padding-bottom 0.1em компенсирует ассиметрию метрик Segoe UI (ink уходил на ~1.5px ниже центра круга при flex-центрировании) - @media <=480px: клиентская вьюха звонка разворачивается на весь экран (height 100dvh, media flex:1, aspect-ratio снят) вместо squat 16:9 Co-Authored-By: Claude Opus 4.8 --- apps/web-chat/src/styles.css | 3 ++- packages/ui/src/call/call-view.css | 9 +++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/apps/web-chat/src/styles.css b/apps/web-chat/src/styles.css index 4ccb7f6..854be9e 100644 --- a/apps/web-chat/src/styles.css +++ b/apps/web-chat/src/styles.css @@ -35,6 +35,7 @@ body, @media (max-width: 480px) { .public-call-page { - padding: 8px; + padding: 0; + align-items: stretch; } } diff --git a/packages/ui/src/call/call-view.css b/packages/ui/src/call/call-view.css index 116fc7d..c3eba69 100644 --- a/packages/ui/src/call/call-view.css +++ b/packages/ui/src/call/call-view.css @@ -1,6 +1,6 @@ .hub-call-view { width:100%; max-width:428px; background:#fff; border:1px solid #e8e8e8; border-radius:24px; box-shadow:0 12px 40px rgba(0,0,0,.12); overflow:hidden; color:#262626; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } .hub-call-head { display:flex; align-items:center; gap:11px; padding:12px 15px; border-bottom:1px solid #e8e8e8; } -.hub-call-avatar { display:flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; font-weight:600; flex:none; } +.hub-call-avatar { display:flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; font-weight:600; flex:none; padding-bottom:0.1em; } .hub-call-avatar.small { width:38px; height:38px; font-size:14px; } .hub-call-avatar.big { width:88px; height:88px; font-size:30px; position:relative; z-index:2; box-shadow:0 4px 18px rgba(0,0,0,.35); } .hub-call-avatar.pip { width:34px; height:34px; font-size:12px; background:#595959; position:absolute; inset:0; margin:auto; } @@ -55,4 +55,9 @@ .hub-call-spin { animation:hub-call-spin .9s linear infinite; } @keyframes hub-call-ring { from { transform:scale(1); opacity:.55; } to { transform:scale(2.3); opacity:0; } } @keyframes hub-call-spin { to { transform:rotate(360deg); } } -@media (max-width:480px) { .hub-call-view { max-width:none; border-radius:18px; } .hub-call-head { padding:11px 12px; } .hub-call-pip { width:88px; height:58px; } } +@media (max-width:480px) { + .hub-call-view { max-width:none; height:100vh; height:100dvh; border-radius:0; border:0; display:flex; flex-direction:column; } + .hub-call-head { padding:11px 12px; flex:none; } + .hub-call-media { flex:1 1 auto; aspect-ratio:auto; min-height:0; } + .hub-call-pip { width:88px; height:58px; } +}