Visual fixes and resize observer for scheduler form (#14527)

src/panels/config/helpers/forms/ha-schedule-form.ts

@@ -17,15 +17,17 @@ import {
   unsafeCSS,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { firstWeekdayIndex } from "../../../../common/datetime/first_weekday";
 import { formatTime24h } from "../../../../common/datetime/format_time";
 import { useAmPm } from "../../../../common/datetime/use_am_pm";
-import { firstWeekdayIndex } from "../../../../common/datetime/first_weekday";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { debounce } from "../../../../common/util/debounce";
 import "../../../../components/ha-icon-picker";
 import "../../../../components/ha-textfield";
 import { Schedule, ScheduleDay, weekdays } from "../../../../data/schedule";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
+import { installResizeObserver } from "../../../lovelace/common/install-resize-observer";
 
 const defaultFullCalendarConfig: CalendarOptions = {
   plugins: [timeGridPlugin, interactionPlugin],
@@ -71,6 +73,8 @@ class HaScheduleForm extends LitElement {
 
   private _item?: Schedule;
 
+  private _resizeObserver?: ResizeObserver;
+
   set item(item: Schedule) {
     this._item = item;
     if (item) {
@@ -104,6 +108,40 @@ class HaScheduleForm extends LitElement {
     );
   }
 
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this.updateComplete.then(() => this._attachObserver());
+  }
+
+  public disconnectedCallback(): void {
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+    }
+  }
+
+  private _measureForm() {
+    const form = this.shadowRoot!.querySelector(".form");
+    if (!form) {
+      return;
+    }
+
+    this.calendar?.updateSize();
+  }
+
+  private async _attachObserver(): Promise<void> {
+    if (!this._resizeObserver) {
+      await installResizeObserver();
+      this._resizeObserver = new ResizeObserver(
+        debounce(() => this._measureForm(), 250, false)
+      );
+    }
+    const form = this.shadowRoot!.querySelector(".form");
+    if (!form) {
+      return;
+    }
+    this._resizeObserver.observe(form);
+  }
+
   protected render(): TemplateResult {
     if (!this.hass) {
       return html``;
@@ -397,12 +435,45 @@ class HaScheduleForm extends LitElement {
           --fc-border-color: var(--divider-color);
           --fc-event-border-color: var(--divider-color);
         }
-        .fc-scroller {
+
-          overflow-x: visible !important;
-        }
         .fc-v-event .fc-event-time {
           white-space: inherit;
         }
+        .fc-theme-standard .fc-scrollgrid {
+          border: 1px solid var(--divider-color);
+          border-radius: var(--mdc-shape-small, 4px);
+        }
+
+        .fc-scrollgrid-section-header td {
+          border: none;
+        }
+        :host([narrow]) .fc-scrollgrid-sync-table {
+          overflow: hidden;
+        }
+        table.fc-scrollgrid-sync-table
+          tbody
+          tr:first-child
+          .fc-daygrid-day-top {
+          padding-top: 0;
+        }
+        .fc-scroller::-webkit-scrollbar {
+          width: 0.4rem;
+          height: 0.4rem;
+        }
+        .fc-scroller::-webkit-scrollbar-thumb {
+          -webkit-border-radius: 4px;
+          border-radius: 4px;
+          background: var(--scrollbar-thumb-color);
+        }
+        .fc-scroller {
+          overflow-y: auto;
+          scrollbar-color: var(--scrollbar-thumb-color) transparent;
+          scrollbar-width: thin;
+        }
+
+        .fc-timegrid-event-short .fc-event-time:after {
+          content: ""; /* prevent trailing dash in half hour events since we do not have event titles */
+        }
 
         a {
           color: inherit !important;