diff --git a/src/components/SelectMenu.tsx b/src/components/SelectMenu.tsx index 98724ac..5ff1b1d 100644 --- a/src/components/SelectMenu.tsx +++ b/src/components/SelectMenu.tsx @@ -55,7 +55,7 @@ export function SelectMenu({ const placeAbove = spaceBelow < minimumHeight && spaceAbove > spaceBelow; const available = placeAbove ? spaceAbove : spaceBelow; const height = Math.min(preferredHeight, Math.max(Math.min(minimumHeight, available), available)); - const width = Math.max(rect.width, 180); + const width = Math.min(320, Math.max(rect.width, 180)); const maxLeft = Math.max(edgeGap, window.innerWidth - edgeGap - width); const left = Math.min(Math.max(edgeGap, rect.left), maxLeft); const desiredTop = placeAbove ? rect.top - triggerGap - height : rect.bottom + triggerGap; diff --git a/src/styles/usage-subpages.css b/src/styles/usage-subpages.css index 110a99f..78afb47 100644 --- a/src/styles/usage-subpages.css +++ b/src/styles/usage-subpages.css @@ -98,29 +98,42 @@ background: var(--usage-page-hover); } -/* Keep every usage filter visible. Each select sizes to its option text. */ -.usage-records-page .usage-filter-group { - display: flex; - flex-wrap: wrap; - align-items: center; - grid-template-columns: none; +/* One fixed-width control per filter. The menu fills the outer field. */ +.usage-records-page .usage-filter-item { + width: auto; + min-width: 0; + padding: 0; + overflow: hidden; } -.usage-records-page .usage-filter-item { - flex: 0 0 auto; - width: max-content; - max-width: 100%; - min-width: 0; +.usage-records-page .usage-filter-item .select-menu, +.usage-records-page .usage-filter-item .select-menu-trigger { + width: 100%; + height: 100%; + min-height: 0; + border: 0; + border-radius: inherit; + background: transparent; + box-shadow: none; +} + +.usage-records-page .usage-filter-item .select-menu-trigger { + grid-template-columns: minmax(0, 1fr) 16px; padding: 0 10px 0 12px; } +.usage-records-page .usage-filter-item .select-menu-trigger:hover:not(:disabled), +.usage-records-page .usage-filter-item .select-menu.open .select-menu-trigger { + border-color: transparent; + background: transparent; +} + .usage-records-page .usage-filter-item select { - width: max-content; + width: 100%; max-width: 100%; min-width: 0; - field-sizing: content; padding: 0 20px 0 0; - background-color: var(--bg-primary); + background-color: transparent; color: var(--text-primary); color-scheme: inherit; }