Use ha-scrollbar in add automation item dialog (#30187)

Use ha-scrollbar for add automation item dialog

src/panels/config/automation/add-automation-element-dialog.ts

@@ -54,6 +54,7 @@ import "../../../components/ha-service-icon";
 import "../../../components/ha-tooltip";
 import { TRIGGER_ICONS } from "../../../components/ha-trigger-icon";
 import "../../../components/search-input";
+import { haStyleScrollbar } from "../../../resources/styles";
 import {
   ACTION_BUILDING_BLOCKS_GROUP,
   ACTION_COLLECTIONS,
@@ -599,10 +600,13 @@ class DialogAddAutomationElement
                 .value=${this._selectedTarget}
                 @value-changed=${this._handleTargetSelected}
                 .narrow=${this._narrow}
-                class=${this._getAddFromTargetHidden(
+                class=${classMap({
+                  "ha-scrollbar": true,
+                  [this._getAddFromTargetHidden(
                     this._narrow,
                     this._selectedTarget
-                )}
+                  )]: true,
+                })}
                 .manifests=${this._manifests}
               ></ha-automation-add-from-target>`
             : html`
@@ -610,6 +614,7 @@ class DialogAddAutomationElement
                   class=${classMap({
                     groups: true,
                     hidden: hideCollections,
+                    "ha-scrollbar": true,
                   })}
                 >
                   ${this._params!.clipboardItem
@@ -2108,6 +2113,7 @@ class DialogAddAutomationElement
 
   static get styles(): CSSResultGroup {
     return [
+      haStyleScrollbar,
       css`
         ha-bottom-sheet {
           --ha-bottom-sheet-height: 90vh;

src/panels/config/automation/add-automation-element/ha-automation-add-items.ts

@@ -20,6 +20,7 @@ import type { ConfigEntry } from "../../../../data/config_entries";
 import type { LabelRegistryEntry } from "../../../../data/label/label_registry";
 import type { HomeAssistant } from "../../../../types";
 import type { AddAutomationElementListItem } from "../add-automation-element-dialog";
+import { haStyleScrollbar } from "../../../../resources/styles";
 import { getTargetIcon } from "../target/get_target_icon";
 
 type Target = [string, string | undefined, string | undefined];
@@ -69,6 +70,7 @@ export class HaAutomationAddItems extends LitElement {
         blank: this.error || !this.items || !this.items.length,
         error: this.error,
         scrolled: this._itemsScrolled,
+        "ha-scrollbar": this.scrollable,
       })}
       @scroll=${this._onItemsScroll}
     >
@@ -201,7 +203,9 @@ export class HaAutomationAddItems extends LitElement {
     }
   }
 
-  static styles = css`
+  static styles = [
+    haStyleScrollbar,
+    css`
       :host {
         display: flex;
         flex-grow: 1;
@@ -329,7 +333,8 @@ export class HaAutomationAddItems extends LitElement {
       .selected-target ha-domain-icon {
         filter: grayscale(100%);
       }
-  `;
+    `,
+  ];
 }
 
 declare global {