Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-10-01 17:29:02 +01:00
Code Activity

Let the map fill the screen on the map dashboard (#54263)

Browse Source 
* Let the map fill the screen on the map dashboard

A map in a panel view stopped at the safe area, leaving a strip of empty
card beside it, and the drawer stopped there too. Map tiles carry no text
to read, so the map and the drawer now run to the edges of the screen,
while everything that is read or tapped stays inside the safe area: the
drawer's content, the card's buttons, and the map's own controls, which
already had insets for the drawer and now take the safe area as well.

The view container exposes the insets it applies as custom properties so
the card can cancel exactly those, and the bottom sheet takes its side
insets from properties that default to the safe area.

* Address review on the map full bleed
This commit is contained in:
Bruno Pantaleão Gonçalves
2026-09-19 22:37:43 +02:00
committed by GitHub
parent 60f7728d54
commit c6f72c9cf5
5 changed files with 59 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ha-resizable-bottom-sheet.ts
+18 -6
View File
@@ -330,8 +330,20 @@ export class HaResizableBottomSheet extends LitElement {
top: 0;
inset-inline-start: 0;
position: fixed;
--sheet-inset-left: var(
--ha-bottom-sheet-inset-left,
var(--safe-area-inset-left)
);
--sheet-inset-right: var(
--ha-bottom-sheet-inset-right,
var(--safe-area-inset-right)
);
--sheet-border-width: var(--ha-bottom-sheet-border-width, 0px);
--sheet-side-borders: calc(2 * var(--sheet-border-width));
width: calc(
100% - 4px - var(--safe-area-inset-left) - var(--safe-area-inset-right)
100% - var(--sheet-side-borders) - var(--sheet-inset-left) - var(
--sheet-inset-right
)
);
max-width: 100%;
border: none;
@@ -353,14 +365,14 @@ export class HaResizableBottomSheet extends LitElement {
);
transform: translateY(100%);
transition: transform ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms ease;
border-top-width: var(--ha-bottom-sheet-border-width);
border-right-width: var(--ha-bottom-sheet-border-width);
border-left-width: var(--ha-bottom-sheet-border-width);
border-top-width: var(--sheet-border-width);
border-right-width: var(--sheet-border-width);
border-left-width: var(--sheet-border-width);
border-bottom-width: 0;
border-style: var(--ha-bottom-sheet-border-style);
border-color: var(--ha-bottom-sheet-border-color);
margin-left: var(--safe-area-inset-left);
margin-right: var(--safe-area-inset-right);
margin-left: var(--sheet-inset-left);
margin-right: var(--sheet-inset-right);
}
dialog.show {
src/components/map/ha-map.ts
+4 -2
View File
@@ -1537,9 +1537,11 @@ export class HaMap extends ReactiveElement {
/* Lets a card keep the attribution and scale clear of an overlay */
margin-bottom: var(--ha-map-bottom-inset, 0);
}
.maplibregl-ctrl-top-left,
.maplibregl-ctrl-bottom-left {
margin-left: var(--ha-map-left-inset, 0);
}
.maplibregl-ctrl-top-right,
.maplibregl-ctrl-bottom-right {
margin-right: var(--ha-map-right-inset, 0);
}
@@ -1654,10 +1656,10 @@ export class HaMap extends ReactiveElement {
/* Lets a card keep the attribution and scale clear of an overlay */
margin-bottom: var(--ha-map-bottom-inset, 0);
}
.leaflet-bottom.leaflet-left {
.leaflet-left {
margin-left: var(--ha-map-left-inset, 0);
}
.leaflet-bottom.leaflet-right {
.leaflet-right {
margin-right: var(--ha-map-right-inset, 0);
}
.leaflet-control,
src/panels/lovelace/cards/hui-map-card.ts
+25 -5
View File
@@ -940,17 +940,37 @@ class HuiMapCard extends LitElement implements LovelaceCard {
z-index: 1;
}
#root.panel-layout {
--map-bleed-left: var(--view-container-inset-left, 0px);
--map-bleed-right: var(--view-container-inset-right, 0px);
--map-bleed-bottom: var(--view-container-inset-bottom, 0px);
}
#card:has(#root.panel-layout) {
overflow: visible;
}
#root.panel-layout ha-map {
left: calc(-1 * var(--map-bleed-left));
right: calc(-1 * var(--map-bleed-right));
bottom: calc(-1 * var(--map-bleed-bottom));
width: auto;
height: auto;
}
/* Keep the attribution and scale ruler clear of the drawer: beside it on
wide layouts, above it on phones. The controls sit at physical corners. */
#root.panel-layout ha-map {
--ha-map-left-inset: calc(
var(--overview-width, 0px) + 2 * var(--ha-space-3)
var(--overview-width, 0px) + 2 * var(--ha-space-3) +
var(--map-bleed-left)
);
--ha-map-right-inset: var(--map-bleed-right);
--ha-map-bottom-inset: var(--map-bleed-bottom);
}
#root.panel-layout.rtl ha-map {
--ha-map-left-inset: 0px;
--ha-map-left-inset: var(--map-bleed-left);
--ha-map-right-inset: calc(
var(--overview-width, 0px) + 2 * var(--ha-space-3)
var(--overview-width, 0px) + 2 * var(--ha-space-3) +
var(--map-bleed-right)
);
}
@@ -966,8 +986,8 @@ class HuiMapCard extends LitElement implements LovelaceCard {
#root.panel-layout ha-map,
#root.panel-layout.rtl ha-map {
--ha-map-left-inset: 0px;
--ha-map-right-inset: 0px;
--ha-map-left-inset: var(--map-bleed-left);
--ha-map-right-inset: var(--map-bleed-right);
--ha-map-bottom-inset: calc(
var(--overview-height, 0px) + var(--ha-space-2)
);
src/panels/lovelace/cards/map/hui-map-overview.ts
+5 -1
View File
@@ -790,6 +790,8 @@ export class HuiMapOverview extends LitElement {
pointer-events: auto;
/* The tabs sit right under the handle */
--ha-bottom-sheet-handle-padding: var(--ha-space-2);
--ha-bottom-sheet-inset-left: 0px;
--ha-bottom-sheet-inset-right: 0px;
}
.panel.sheet {
@@ -798,7 +800,9 @@ export class HuiMapOverview extends LitElement {
border-radius: 0;
box-shadow: none;
padding-top: var(--ha-space-7);
padding-bottom: max(var(--ha-space-3), env(safe-area-inset-bottom));
padding-right: max(var(--ha-space-3), var(--safe-area-inset-right));
padding-bottom: max(var(--ha-space-3), var(--safe-area-inset-bottom));
padding-left: max(var(--ha-space-3), var(--safe-area-inset-left));
}
.tabs {
src/panels/lovelace/hui-root.ts
+7 -5
View File
@@ -1542,20 +1542,22 @@ class HUIRoot extends LitElement {
display: flex;
min-height: 100vh;
box-sizing: border-box;
--view-container-inset-left: 0px;
--view-container-inset-right: var(--safe-area-inset-right);
--view-container-inset-bottom: var(--safe-area-inset-bottom);
padding-top: calc(
var(--header-height) + var(--safe-area-inset-top) +
var(--view-container-padding-top, 0px)
);
padding-right: var(--safe-area-inset-right);
padding-inline-end: var(--safe-area-inset-right);
padding-right: var(--view-container-inset-right);
padding-bottom: calc(
var(--safe-area-inset-bottom) +
var(--view-container-inset-bottom) +
var(--view-container-padding-bottom, 0px)
);
}
.narrow hui-view-container {
padding-left: var(--safe-area-inset-left);
padding-inline-start: var(--safe-area-inset-left);
--view-container-inset-left: var(--safe-area-inset-left);
padding-left: var(--view-container-inset-left);
}
hui-view-container > * {
display: flex;