[logbook] fix scrolling on iOS (#4950)

* [logbook] fix scrolling on iOS

* Update styling

* Update ha-logbook.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/panels/logbook/ha-logbook.ts

@@ -15,7 +15,7 @@ import {
 } from "lit-element";
 import { HomeAssistant } from "../../types";
 import { fireEvent } from "../../common/dom/fire_event";
-import "lit-virtualizer";
+import { scroll } from "lit-virtualizer";
 import { LogbookEntry } from "../../data/logbook";
 
 class HaLogbook extends LitElement {
@@ -44,19 +44,23 @@ class HaLogbook extends LitElement {
     }
 
     return html`
-      <lit-virtualizer
-        .items=${this.entries}
-        .renderItem=${(item: LogbookEntry, index: number) =>
-          this._renderLogbookItem(item, index)}
-        style="height: 100%;"
-      ></lit-virtualizer>
+      <div>
+        ${scroll({
+          items: this.entries,
+          renderItem: (item: LogbookEntry, index?: number) =>
+            this._renderLogbookItem(item, index),
+        })}
+      </div>
     `;
   }
 
   private _renderLogbookItem(
     item: LogbookEntry,
-    index: number
+    index?: number
   ): TemplateResult {
+    if (!index) {
+      return html``;
+    }
     const previous = this.entries[index - 1];
     const state = item.entity_id ? this.hass.states[item.entity_id] : undefined;
     return html`
@@ -149,6 +153,19 @@ class HaLogbook extends LitElement {
       a {
         color: var(--primary-color);
       }
+
+      .uni-virtualizer-host {
+        display: block;
+        position: relative;
+        contain: strict;
+        height: 100%;
+        overflow: auto;
+        padding: 0 16px;
+      }
+
+      .uni-virtualizer-host > * {
+        box-sizing: border-box;
+      }
     `;
   }
 }

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

@@ -27,10 +27,6 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
       <style include="ha-style">
-        .content {
-          padding: 0 16px 0 16px;
-        }
-
         ha-logbook {
           height: calc(100vh - 136px);
         }
@@ -53,6 +49,7 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
         .filters {
           display: flex;
           align-items: flex-end;
+          padding: 0 16px;
         }
 
         :host([narrow]) .filters {
@@ -135,7 +132,6 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
           </app-toolbar>
         </app-header>
 
-        <div class="content">
         <paper-spinner
           active="[[isLoading]]"
           hidden$="[[!isLoading]]"
@@ -156,10 +152,7 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
             label="[[localize('ui.panel.logbook.period')]]"
             disabled="[[isLoading]]"
           >
-              <paper-listbox
-                slot="dropdown-content"
-                selected="{{_periodIndex}}"
-              >
+            <paper-listbox slot="dropdown-content" selected="{{_periodIndex}}">
               <paper-item
                 >[[localize('ui.duration.day', 'count', 1)]]</paper-item
               >
@@ -186,7 +179,6 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
           entries="[[entries]]"
           hidden$="[[isLoading]]"
         ></ha-logbook>
-        </div>
       </app-header-layout>
     `;
   }