Dont virtualize logbook in more info

src/dialogs/more-info/ha-more-info-history.ts

@@ -8,15 +8,14 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit-element";
-import { styleMap } from "lit-html/directives/style-map";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import "../../components/ha-circular-progress";
 import "../../components/state-history-charts";
 import { getRecentWithCache } from "../../data/cached-history";
 import { HistoryResult } from "../../data/history";
 import { getLogbookData, LogbookEntry } from "../../data/logbook";
 import "../../panels/logbook/ha-logbook";
-import { haStyle } from "../../resources/styles";
+import { haStyle, haStyleScrollbar } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 
 @customElement("ha-more-info-history")
@@ -59,12 +58,10 @@ export class MoreInfoHistory extends LitElement {
         : this._entries.length
         ? html`
             <ha-logbook
+              class="ha-scrollbar"
               narrow
               no-icon
               no-name
-              style=${styleMap({
-                height: `${(this._entries.length + 1) * 56}px`,
-              })}
               .hass=${this.hass}
               .entries=${this._entries}
               .userIdToName=${this._persons}
@@ -140,6 +137,7 @@ export class MoreInfoHistory extends LitElement {
   static get styles() {
     return [
       haStyle,
+      haStyleScrollbar,
       css`
         state-history-charts {
           display: block;
@@ -151,8 +149,8 @@ export class MoreInfoHistory extends LitElement {
         }
         ha-logbook {
           max-height: 360px;
+          overflow: auto;
         }
-
         ha-circular-progress {
           display: flex;
           justify-content: center;

src/panels/logbook/ha-logbook.ts

@@ -21,7 +21,6 @@ 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")
@@ -38,6 +37,9 @@ class HaLogbook extends LitElement {
   @property({ attribute: "rtl", type: Boolean })
   private _rtl = false;
 
+  @property({ type: Boolean, attribute: "virtualize", reflect: true })
+  public virtualize = false;
+
   @property({ type: Boolean, attribute: "no-icon" })
   public noIcon = false;
 
@@ -74,19 +76,23 @@ class HaLogbook extends LitElement {
 
     return html`
       <div
-        class="container ha-scrollbar ${classMap({
+        class="container ${classMap({
           narrow: this.narrow,
           rtl: this._rtl,
           "no-name": this.noName,
           "no-icon": this.noIcon,
         })}"
         @scroll=${this._saveScrollPos}
       >
-        ${scroll({
-          items: this.entries,
-          renderItem: (item: LogbookEntry, index?: number) =>
-            this._renderLogbookItem(item, index),
-        })}
+        ${this.virtualize
+          ? scroll({
+              items: this.entries,
+              renderItem: (item: LogbookEntry, index?: number) =>
+                this._renderLogbookItem(item, index),
+            })
+          : this.entries.map((item, index) =>
+              this._renderLogbookItem(item, index)
+            )}
       </div>
     `;
   }
@@ -185,106 +191,103 @@ class HaLogbook extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
-    return [
-      haStyleScrollbar,
-      css`
-        :host {
-          display: block;
-          height: 100%;
-        }
-
-        .rtl {
-          direction: ltr;
-        }
-
-        .entry-container {
-          width: 100%;
-        }
-
-        .entry {
-          display: flex;
-          width: 100%;
-          line-height: 2em;
-          padding: 8px 16px;
-          box-sizing: border-box;
-          border-top: 1px solid
-            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
-        }
-
-        .time {
-          display: flex;
-          justify-content: center;
-          flex-direction: column;
-          width: 75px;
-          flex-shrink: 0;
-          font-size: 12px;
-          color: var(--secondary-text-color);
-        }
-
-        .date {
-          margin: 8px 0;
-          padding: 0 16px;
-        }
-
-        .narrow .date {
-          padding: 0 8px;
-        }
-
-        .rtl .date {
-          direction: rtl;
-        }
-
-        .icon-message {
-          display: flex;
-          align-items: center;
-        }
-
-        .no-entries {
-          text-align: center;
-        }
-
-        ha-icon {
-          margin: 0 8px 0 16px;
-          flex-shrink: 0;
-          color: var(--primary-text-color);
-        }
-
-        .message {
-          color: var(--primary-text-color);
-        }
-
-        .no-name .item-message {
-          text-transform: capitalize;
-        }
-
-        a {
-          color: var(--primary-color);
-        }
-
-        .uni-virtualizer-host {
-          display: block;
-          position: relative;
-          contain: strict;
-          height: 100%;
-          overflow: auto;
-        }
-
-        .uni-virtualizer-host > * {
-          box-sizing: border-box;
-        }
-
-        .narrow .entry {
-          flex-direction: column;
-          line-height: 1.5;
-          padding: 8px;
-        }
-
-        .narrow .icon-message ha-icon {
-          margin-left: 0;
-        }
-      `,
-    ];
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      .rtl {
+        direction: ltr;
+      }
+
+      .entry-container {
+        width: 100%;
+      }
+
+      .entry {
+        display: flex;
+        width: 100%;
+        line-height: 2em;
+        padding: 8px 16px;
+        box-sizing: border-box;
+        border-top: 1px solid
+          var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
+      }
+
+      .time {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        width: 75px;
+        flex-shrink: 0;
+        font-size: 12px;
+        color: var(--secondary-text-color);
+      }
+
+      .date {
+        margin: 8px 0;
+        padding: 0 16px;
+      }
+
+      .narrow .date {
+        padding: 0 8px;
+      }
+
+      .rtl .date {
+        direction: rtl;
+      }
+
+      .icon-message {
+        display: flex;
+        align-items: center;
+      }
+
+      .no-entries {
+        text-align: center;
+      }
+
+      ha-icon {
+        margin: 0 8px 0 16px;
+        flex-shrink: 0;
+        color: var(--primary-text-color);
+      }
+
+      .message {
+        color: var(--primary-text-color);
+      }
+
+      .no-name .item-message {
+        text-transform: capitalize;
+      }
+
+      a {
+        color: var(--primary-color);
+      }
+
+      .uni-virtualizer-host {
+        display: block;
+        position: relative;
+        contain: strict;
+        height: 100%;
+        overflow: auto;
+      }
+
+      .uni-virtualizer-host > * {
+        box-sizing: border-box;
+      }
+
+      .narrow .entry {
+        flex-direction: column;
+        line-height: 1.5;
+        padding: 8px;
+      }
+
+      .narrow .icon-message ha-icon {
+        margin-left: 0;
+      }
+    `;
   }
 }
 

src/panels/logbook/ha-panel-logbook.ts

@@ -1,33 +1,33 @@
+import { mdiRefresh } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "../../components/ha-icon-button";
-import "../../components/ha-circular-progress";
-import { computeRTL } from "../../common/util/compute_rtl";
-import "../../components/entity/ha-entity-picker";
-import "../../components/ha-menu-button";
-import "../../layouts/ha-app-layout";
-import "./ha-logbook";
 import {
-  LitElement,
-  property,
-  internalProperty,
+  css,
   customElement,
   html,
-  css,
+  internalProperty,
+  LitElement,
+  property,
   PropertyValues,
 } from "lit-element";
-import { HomeAssistant } from "../../types";
-import { haStyle } from "../../resources/styles";
-import { fetchUsers } from "../../data/user";
-import { fetchPersons } from "../../data/person";
+import { computeRTL } from "../../common/util/compute_rtl";
+import "../../components/entity/ha-entity-picker";
+import "../../components/ha-circular-progress";
+import "../../components/ha-date-range-picker";
+import type { DateRangePickerRanges } from "../../components/ha-date-range-picker";
+import "../../components/ha-icon-button";
+import "../../components/ha-menu-button";
 import {
   clearLogbookCache,
   getLogbookData,
   LogbookEntry,
 } from "../../data/logbook";
-import { mdiRefresh } from "@mdi/js";
-import "../../components/ha-date-range-picker";
-import type { DateRangePickerRanges } from "../../components/ha-date-range-picker";
+import { fetchPersons } from "../../data/person";
+import { fetchUsers } from "../../data/user";
+import "../../layouts/ha-app-layout";
+import { haStyle } from "../../resources/styles";
+import { HomeAssistant } from "../../types";
+import "./ha-logbook";
 
 @customElement("ha-panel-logbook")
 export class HaPanelLogbook extends LitElement {
@@ -125,6 +125,7 @@ export class HaPanelLogbook extends LitElement {
               .hass=${this.hass}
               .entries=${this._entries}
               .userIdToName=${this._userIdToName}
+              virtualize
             ></ha-logbook>`}
       </ha-app-layout>
     `;