perf(CALEXT2_Slot): measure container rect once before event loop

When hideOverflow is enabled, Event.draw() was calling
getBoundingClientRect() on the container inside the loop,
causing a redundant forced reflow for every event appended.

Move the hideOverflow CSS setup and the container measurement
into Slot.drawEvents() so they run once per slot. Pass the
pre-measured contentRect to Event.draw() as a parameter.

Author: KristjanESPERANTO

CALEXT2_Event.js

@@ -27,16 +27,11 @@ class Event {
     }
   }
 
-  draw (slot, targetDom) {
-    const {hideOverflow} = slot;
+  draw (slot, targetDom, contentRect = null) {
     const eventDom = this.dom;
     eventDom.style.opacity = 0;
     targetDom.appendChild(eventDom);
-    if (hideOverflow) {
-      targetDom.classList.add("hideOverflow");
-      targetDom.style.maxHeight = slot.maxHeight;
-      targetDom.style.height = slot.maxHeight;
-      const contentRect = targetDom.getBoundingClientRect();
+    if (contentRect) {
       const eventRect = eventDom.getBoundingClientRect();
       if (
         eventRect.bottom > contentRect.bottom ||

CALEXT2_Slot.js

@@ -52,18 +52,30 @@ class Slot {
 
   drawEvents () {
     let hiddenCount = 0;
+    // Apply overflow constraints and read the container rect once before the
+    // loop. Each appendChild forces a layout recalculation, so measuring
+    // targetDom inside the loop would cause a redundant reflow per event.
+    // The container dimensions don't change between appends, so a single
+    // setup + read up-front is sufficient.
+    let contentRect = null;
+    if (this.hideOverflow) {
+      this.contentDom.classList.add("hideOverflow");
+      this.contentDom.style.maxHeight = this.maxHeight;
+      this.contentDom.style.height = this.maxHeight;
+      contentRect = this.contentDom.getBoundingClientRect();
+    }
     for (let i = 0; i < this.events.length; i++) {
       const event = new Event(this.events[i], this);
-      hiddenCount += this.drawEvent(event);
+      hiddenCount += this.drawEvent(event, contentRect);
     }
     if (hiddenCount > 0) {
       this.footerDom.querySelector(".hiddenCount").innerHTML =
         `+ ${hiddenCount}`;
     }
   }
 
-  drawEvent (event) {
-    return event.draw(this, this.contentDom);
+  drawEvent (event, contentRect) {
+    return event.draw(this, this.contentDom, contentRect);
   }
 
   assignEvents (events) {