diff --git a/station-navigation/styles.css b/station-navigation/styles.css index 027f6b39..c4213835 100644 --- a/station-navigation/styles.css +++ b/station-navigation/styles.css @@ -116,15 +116,19 @@ top: 8px; left: 8px; right: 8px; + display: grid; + grid-template-columns: 36px max-content minmax(0, 1fr); gap: 6px; padding: 5px; border-radius: 14px; } - .station-navigation-shell .region-picker-trigger { order: 2; min-height: 36px; padding: 0 10px; border-radius: 10px; } - .station-navigation-shell .explore-search-shell { order: 3; flex: 1 1 150px; } + .station-navigation-shell .region-picker-trigger { grid-column: 1 / 3; grid-row: 2; min-height: 30px; padding: 0 9px; border-radius: 9px; } + .station-navigation-shell .explore-search-shell { grid-column: 2 / -1; grid-row: 1; min-width: 0; } .station-navigation-shell .locate-btn { + grid-column: 1; + grid-row: 1; flex-basis: 36px; width: 36px; min-height: 36px; @@ -137,10 +141,10 @@ } .station-navigation-shell .entity-search-field input { font-size: 12px; } - .station-navigation-shell .selected-location-filter-rail { order: 4; flex: 1 0 100%; max-width: none; padding-bottom: 1px; } - .station-navigation-shell .filter-chip-rail { order: 5; max-width: none; overflow: visible; } - .station-navigation-shell .map-filter-chip { min-height: 30px; padding: 0 10px; font-size: 10px; } - .station-navigation-shell .filter-result-meta { order: 6; padding-right: 5px; font-size: 9px; } + .station-navigation-shell .selected-location-filter-rail { grid-column: 1 / -1; grid-row: 3; max-width: none; padding: 1px 0 0; } + .station-navigation-shell .filter-chip-rail { grid-column: 3; grid-row: 2; min-width: 0; max-width: none; overflow-x: auto; } + .station-navigation-shell .map-filter-chip { min-height: 30px; padding: 0 8px; font-size: 10px; } + .station-navigation-shell .filter-result-meta { display: none; } .region-picker-backdrop { align-items: end; padding: 0; } .region-picker-dialog { width: 100%; max-height: min(82dvh, 700px); border-radius: 20px 20px 0 0; } @@ -151,11 +155,17 @@ .region-picker-footer { padding: 10px 15px calc(10px + env(safe-area-inset-bottom)); } .station-navigation-shell .explore-suggestions { + top: calc(100% + 43px); + left: -42px; width: calc(100vw - 32px); - max-height: min(300px, calc(100dvh - 248px)); + max-height: min(280px, calc(100dvh - 250px)); border-radius: 14px; } + .station-navigation-shell .map-explore-toolbar:has(.selected-location-filter-rail:not([hidden])) .explore-suggestions { + top: calc(100% + 79px); + } + .station-navigation-shell .map-action-controls { right: 8px; bottom: 31px;