From 8d8b39e897f60d539b3dd323c419d3ac0ec36a99 Mon Sep 17 00:00:00 2001 From: heaven Date: Thu, 21 May 2026 13:43:11 +0300 Subject: [PATCH] fix(telegram-widget): stack password row column on mobile so the show toggle does not overflow off the right edge --- apps/widget-telegram/src/styles.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/apps/widget-telegram/src/styles.css b/apps/widget-telegram/src/styles.css index 111497f5..b67792ca 100644 --- a/apps/widget-telegram/src/styles.css +++ b/apps/widget-telegram/src/styles.css @@ -742,6 +742,21 @@ body { width: 100%; } + /* PasswordForm wraps its input + show/hide toggle in `.password-row` + * so the toggle pill sits next to the input on desktop. On narrow + * viewports that nested row stays row-direction with `flex-shrink: 0` + * on `.btn-icon`, and the input's monospace `font-size: 20px` + + * `letter-spacing: 4px` (see `.auth-input.password`) pushes the toggle + * off-screen. Continue the same column-stack pattern the outer + * `.auth-card-row` already uses so the toggle drops below the input + * full-width — visually consistent with btn-primary / btn-text. */ + .password-row { + flex-direction: column; + } + .password-row .btn-icon { + width: 100%; + } + /* Compact .command-card on mobile — preserves the «two-row title + * chevron» structure but trims padding so a single login/logout card * doesn't dominate a phone-height viewport. */