From 43bb72de611c1934ccf4179c124d8c3af62fe66e Mon Sep 17 00:00:00 2001 From: aaverbitskiy Date: Mon, 17 Aug 2026 08:50:20 +0000 Subject: [PATCH] =?UTF-8?q?=D0=94=D1=80=D0=BE=D0=BF=D0=B4=D0=B0=D1=83?= =?UTF-8?q?=D0=BD=D1=8B:=20=D1=80=D0=B0=D0=BC=D0=BA=D0=B0=20=D0=BF=D0=BE?= =?UTF-8?q?=D0=B8=D1=81=D0=BA=D0=B0=20=D0=BD=D0=B5=20=D1=80=D0=B5=D0=B6?= =?UTF-8?q?=D0=B5=D1=82=D1=81=D1=8F=20+=20=D1=88=D0=B8=D1=80=D0=B8=D0=BD?= =?UTF-8?q?=D0=B0=20=E2=89=A4350px=20=D1=81=20=D0=B3=D0=BE=D1=80=D0=B8?= =?UTF-8?q?=D0=B7=D0=BE=D0=BD=D1=82=D0=B0=D0=BB=D1=8C=D0=BD=D1=8B=D0=BC=20?= =?UTF-8?q?=D1=81=D0=BA=D1=80=D0=BE=D0=BB=D0=BB=D0=BE=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Поле .dp-search било по специфичности правилом .hgroup-fields input[type=text] {width:100%} (0,2,1) — поле всегда было 100% (=padding-box со скроллом), из-за чего рамка резалась краем и появлялась фантомная горизонтальная полоса. Селектор усилен до .dropdown-panel input.dp-search (0,2,1, позже в источнике), ширина — fill-available (заполняет доступную ширину минус вертикальный скролл). - Панель: max-width 350px + overflow:auto — контент шире 350px даёт горизонтальный скролл (убраны overflow-x:hidden и scrollbar-gutter из прошлой правки). Задеплоено на прод без тега. Co-Authored-By: Claude Opus 4.8 --- frontend/src/styles.css | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 8a25f99..2e3be15 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -314,11 +314,12 @@ input::placeholder { color: var(--text-muted); } display: none; position: absolute; top: calc(100% + 4px); left: 0; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 6px 0; - /* Fit the widest option (no horizontal scroll) instead of a fixed width; the - scrollbar gutter is reserved so the vertical scrollbar never squeezes the - nowrap labels into a horizontal scroll. Capped to the viewport as a safety. */ - width: max-content; min-width: 220px; max-width: 96vw; - max-height: 280px; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; z-index: 30; + /* Fit the widest option instead of a fixed width, capped at 350px — wider + content then scrolls horizontally. The .dp-search fills via fill-available + (not width:100%, whose % included the scrollbar area → clipped border + + phantom horizontal scrollbar). */ + width: max-content; min-width: 220px; max-width: 350px; + max-height: 280px; overflow: auto; z-index: 30; } .dropdown.open .dropdown-panel { display: block; } .dropdown-panel label { @@ -336,9 +337,18 @@ input::placeholder { color: var(--text-muted); } } .dropdown-panel .dp-actions a { font-size: 11px; color: var(--accent); cursor: pointer; text-decoration: none; font-weight: 600; } .dropdown-panel .dp-actions a:hover { text-decoration: underline; } -/* In-dropdown search that filters the option list — a clean, evenly-bordered box. */ -.dropdown-panel .dp-search { - display: block; width: calc(100% - 16px); box-sizing: border-box; margin: 3px 8px 6px; +/* In-dropdown search that filters the option list — a clean, evenly-bordered box. + Selector carries `input` so it out-specifies `.hgroup-fields input[type=text] + { width: 100% }` (0,2,1), which would otherwise force width:100% and clip the + border / spawn a phantom horizontal scrollbar. */ +.dropdown-panel input.dp-search { + display: block; box-sizing: border-box; margin: 3px 8px 6px; + /* Fill the available width MINUS the vertical scrollbar (so the border is never + clipped and no phantom horizontal scrollbar appears); calc(100%-16px) is the + fallback for engines without fill-available. */ + width: calc(100% - 16px); + width: -moz-available; + width: -webkit-fill-available; padding: 7px 10px; font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); outline: none; }