CSS approach

Update src/panels/lovelace/hui-root.ts
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
2026-02-28 04:17:48 +00:00 · 2026-02-26 11:36:21 +00:00 · 2026-02-26 10:28:52 +00:00 · 2026-02-26 10:16:04 +00:00 · 2026-02-26 10:04:09 +00:00
2 changed files with 13 additions and 10 deletions
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -1474,7 +1474,7 @@ class HUIRoot extends LitElement {
        }
        hui-view-container {
          position: relative;
-          display: flex;
+          display: grid;
          height: calc(
            100vh - var(--header-height) - var(--safe-area-inset-top) - var(
                --view-container-padding-top,
@@ -1498,9 +1498,13 @@ class HUIRoot extends LitElement {
          padding-inline-start: var(--safe-area-inset-left);
        }
        hui-view-container > * {
-          flex: 1 1 100%;
+          grid-area: 1 / 1;
+          min-width: 0;
          max-width: 100%;
        }
+        hui-view-container > :not(hui-view-background) {
+          z-index: 1;
+        }
        /**
         * In edit mode we have the tab bar on a new line *
         */
--- a/src/panels/lovelace/views/hui-view-background.ts
+++ b/src/panels/lovelace/views/hui-view-background.ts
@@ -139,18 +139,17 @@ export class HUIViewBackground extends LitElement {
      display: block;
      z-index: -1;
      position: fixed;
-      background-attachment: scroll !important;
-    }
-    :host(:not([fixed-background])) {
-      z-index: -1;
-      position: absolute;
-    }
-    :host {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
-      height: 100%;
+      background-attachment: scroll !important;
+    }
+    :host(:not([fixed-background])) {
+      z-index: 0;
+      pointer-events: none;
+    }
+    :host {
      width: 100%;
      background: var(
        --view-background,
Author	SHA1	Message	Date
Aidan Timson	e681aa46ed	CSS approach	2026-02-26 11:36:21 +00:00
Aidan Timson	737adef642	Update src/panels/lovelace/hui-root.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>	2026-02-26 10:28:52 +00:00
Aidan Timson	d3c7594de2	Use observers	2026-02-26 10:16:04 +00:00
Aidan Timson	be0ff7c6e2	Fix view container backgrouns after scrollbar change	2026-02-26 10:04:09 +00:00