aaverbitskiy/mapdash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Дропдауны: рамка поиска не режется + ширина ≤350px с горизонтальным скроллом

Browse Source 
- Поле .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 <noreply@anthropic.com>
This commit is contained in:
aaverbitskiy 2026-08-17 08:50:20 +00:00
parent 691ec36b9e
commit 43bb72de61
1 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/styles.css
View File

@ -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;
}