More Info History: Scrollbar Style (#6790)

src/components/ha-sidebar.ts

@@ -43,6 +43,7 @@ import {
   getExternalConfig,
 } from "../external_app/external_config";
 import { actionHandler } from "../panels/lovelace/common/directives/action-handler-directive";
+import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant, PanelInfo } from "../types";
 import "./ha-icon";
 import "./ha-menu-button";
@@ -249,6 +250,7 @@ class HaSidebar extends LitElement {
       </div>
       <paper-listbox
         attr-for-selected="data-panel"
+        class="ha-scrollbar"
         .selected=${hass.panelUrl}
         @focusin=${this._listboxFocusIn}
         @focusout=${this._listboxFocusOut}
@@ -677,8 +679,10 @@ class HaSidebar extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResult[] {
-    return css`
+    return [
+      haStyleScrollbar,
+      css`
         :host {
           height: 100%;
           display: block;
@@ -744,27 +748,13 @@ class HaSidebar extends LitElement {
           width: 100%;
         }
 
-      paper-listbox::-webkit-scrollbar {
-        width: 0.4rem;
-        height: 0.4rem;
-      }
-
-      paper-listbox::-webkit-scrollbar-thumb {
-        -webkit-border-radius: 4px;
-        border-radius: 4px;
-        background: var(--scrollbar-thumb-color);
-      }
-
         paper-listbox {
           padding: 4px 0;
           display: flex;
           flex-direction: column;
           box-sizing: border-box;
           height: calc(100% - 196px - env(safe-area-inset-bottom));
-        overflow-y: auto;
           overflow-x: hidden;
-        scrollbar-color: var(--scrollbar-thumb-color) transparent;
-        scrollbar-width: thin;
           background: none;
           margin-left: env(safe-area-inset-left);
         }
@@ -964,7 +954,8 @@ class HaSidebar extends LitElement {
           -webkit-transform: scaleX(-1);
           transform: scaleX(-1);
         }
-    `;
+      `,
+    ];
   }
 }
 

src/panels/logbook/ha-logbook.ts

@@ -21,6 +21,7 @@ import { computeRTL, emitRTLDirection } from "../../common/util/compute_rtl";
 import "../../components/ha-circular-progress";
 import "../../components/ha-icon";
 import { LogbookEntry } from "../../data/logbook";
+import { haStyleScrollbar } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 
 @customElement("ha-logbook")
@@ -73,7 +74,7 @@ class HaLogbook extends LitElement {
 
     return html`
       <div
-        class="container ${classMap({
+        class="container ha-scrollbar ${classMap({
           narrow: this.narrow,
           rtl: this._rtl,
           "no-name": this.noName,
@@ -184,8 +185,10 @@ class HaLogbook extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResult[] {
-    return css`
+    return [
+      haStyleScrollbar,
+      css`
         :host {
           display: block;
           height: 100%;
@@ -280,7 +283,8 @@ class HaLogbook extends LitElement {
         .narrow .icon-message ha-icon {
           margin-left: 0;
         }
-    `;
+      `,
+    ];
   }
 }
 

src/resources/styles.ts

@@ -320,3 +320,22 @@ export const haStyleDialog = css`
     color: var(--error-color);
   }
 `;
+
+export const haStyleScrollbar = css`
+  .ha-scrollbar::-webkit-scrollbar {
+    width: 0.4rem;
+    height: 0.4rem;
+  }
+
+  .ha-scrollbar::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    background: var(--scrollbar-thumb-color);
+  }
+
+  .ha-scrollbar {
+    overflow-y: auto;
+    scrollbar-color: var(--scrollbar-thumb-color) transparent;
+    scrollbar-width: thin;
+  }
+`;