diff --git a/src/components/ha-control-select.ts b/src/components/ha-control-select.ts index da38ed5eb9..40220e179b 100644 --- a/src/components/ha-control-select.ts +++ b/src/components/ha-control-select.ts @@ -202,6 +202,7 @@ export class HaControlSelect extends LitElement { color: var(--primary-text-color); user-select: none; -webkit-tap-highlight-color: transparent; + border-radius: var(--control-select-border-radius); } :host([vertical]) { width: var(--control-select-thickness); @@ -211,7 +212,6 @@ export class HaControlSelect extends LitElement { position: relative; height: 100%; width: 100%; - border-radius: var(--control-select-border-radius); transform: translateZ(0); display: flex; flex-direction: row; diff --git a/src/panels/lovelace/views/hui-sections-view.ts b/src/panels/lovelace/views/hui-sections-view.ts index ab40ce42c4..c412f392f7 100644 --- a/src/panels/lovelace/views/hui-sections-view.ts +++ b/src/panels/lovelace/views/hui-sections-view.ts @@ -525,25 +525,24 @@ export class SectionsView extends LitElement implements LovelaceViewElement { .mobile-tabs { position: fixed; - bottom: calc(var(--ha-space-4) + env(safe-area-inset-bottom)); + bottom: calc(var(--ha-space-3) + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); padding: 0; z-index: 1; - filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15)) - drop-shadow(0 4px 16px rgba(0, 0, 0, 0.1)); } .mobile-tabs ha-control-select { width: max-content; min-width: 280px; max-width: 90%; - --control-select-thickness: 56px; - --control-select-border-radius: var(--ha-border-radius-6xl); + --control-select-thickness: var(--ha-space-14); + --control-select-border-radius: var(--ha-border-radius-pill); --control-select-background: var(--card-background-color); --control-select-background-opacity: 1; --control-select-color: var(--primary-color); --control-select-padding: 6px; + box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 10px 0px; } ha-sortable {