From 47dbf4b53c581ed4b27bcaeae15396a40ad53b38 Mon Sep 17 00:00:00 2001
From: Aidan Timson <aidan@timmo.dev>
Date: Thu, 5 Feb 2026 18:47:22 +0000
Subject: [PATCH] Use scrollbar styles on host

---
 src/panels/lovelace/views/hui-view-container.ts | 2 +-
 src/resources/styles.ts                         | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/panels/lovelace/views/hui-view-container.ts b/src/panels/lovelace/views/hui-view-container.ts
index 364c44b7db..bb14605c45 100644
--- a/src/panels/lovelace/views/hui-view-container.ts
+++ b/src/panels/lovelace/views/hui-view-container.ts
@@ -23,6 +23,7 @@ class HuiViewContainer extends LitElement {
 
   public connectedCallback(): void {
     super.connectedCallback();
+    this.classList.add("ha-scrollbar");
     this._setUpMediaQuery();
     this._applyTheme();
   }
@@ -81,7 +82,6 @@ class HuiViewContainer extends LitElement {
       :host {
         display: block;
         height: 100%;
-        overflow: auto;
         -webkit-overflow-scrolling: touch;
       }
     `,
diff --git a/src/resources/styles.ts b/src/resources/styles.ts
index e9276eb610..d96e8994e8 100644
--- a/src/resources/styles.ts
+++ b/src/resources/styles.ts
@@ -224,17 +224,20 @@ export const haStyleDialogFixedTop = css`
 `;
 
 export const haStyleScrollbar = css`
-  .ha-scrollbar::-webkit-scrollbar {
+  .ha-scrollbar::-webkit-scrollbar,
+  :host(.ha-scrollbar)::-webkit-scrollbar {
     width: 0.4rem;
     height: 0.4rem;
   }
 
-  .ha-scrollbar::-webkit-scrollbar-thumb {
+  .ha-scrollbar::-webkit-scrollbar-thumb,
+  :host(.ha-scrollbar)::-webkit-scrollbar-thumb {
     border-radius: var(--ha-border-radius-sm);
     background: var(--scrollbar-thumb-color);
   }
 
-  .ha-scrollbar {
+  .ha-scrollbar,
+  :host(.ha-scrollbar) {
     overflow-y: auto;
     scrollbar-color: var(--scrollbar-thumb-color) transparent;
     scrollbar-width: thin;