diff --git a/src/components/ha-resizable-bottom-sheet.ts b/src/components/ha-resizable-bottom-sheet.ts
index 04e175597d..9c961b1263 100644
--- a/src/components/ha-resizable-bottom-sheet.ts
+++ b/src/components/ha-resizable-bottom-sheet.ts
@@ -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 {
diff --git a/src/components/map/ha-map.ts b/src/components/map/ha-map.ts
index 132ff619e2..062621d349 100644
--- a/src/components/map/ha-map.ts
+++ b/src/components/map/ha-map.ts
@@ -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,
diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts
index c1a7165f78..a5e08067ca 100644
--- a/src/panels/lovelace/cards/hui-map-card.ts
+++ b/src/panels/lovelace/cards/hui-map-card.ts
@@ -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)
         );
diff --git a/src/panels/lovelace/cards/map/hui-map-overview.ts b/src/panels/lovelace/cards/map/hui-map-overview.ts
index 1a4ab4f4f5..500c13471a 100644
--- a/src/panels/lovelace/cards/map/hui-map-overview.ts
+++ b/src/panels/lovelace/cards/map/hui-map-overview.ts
@@ -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 {
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index db767490f7..8f4ebecddb 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -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;