From 41f3f0590d8f81c87acb6dfa9513db4892706349 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Thu, 27 Jan 2022 14:34:23 +0000
Subject: [PATCH] Better compatibility with ancient ios devices

---
 fold-entity-row.js            | 29 +++++++++++++++++++----------
 src/main.ts                   | 28 ++++++++++++++++++----------
 test/views/2_cooperation.yaml | 13 +++++++++++++
 3 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/fold-entity-row.js b/fold-entity-row.js
index f4001d2..191d7be 100644
--- a/fold-entity-row.js
+++ b/fold-entity-row.js
@@ -325,10 +325,15 @@ class FoldEntityRow extends s {
             }, 100);
         }
         const el = this.shadowRoot.querySelector("#measure");
-        this.observer = new ResizeObserver(() => {
-            this.maxheight = el.scrollHeight;
-        });
-        this.observer.observe(el);
+        try {
+            this.observer = new ResizeObserver(() => {
+                this.maxheight = el.scrollHeight;
+            });
+            this.observer.observe(el);
+        }
+        catch (_e) {
+            this.maxheight = 1e6;
+        }
     }
     connectedCallback() {
         super.connectedCallback();
@@ -459,10 +464,10 @@ class FoldEntityRow extends s {
       #items {
         padding: 0;
         margin: 0;
-        overflow: hidden;
         transition: max-height 0.2s ease-in-out;
         height: 100%;
-        overflow: clip visible;
+        overflow-x: clip;
+        overflow-y: visible;
       }
 
       #items.clip {
@@ -470,21 +475,25 @@ class FoldEntityRow extends s {
       }
 
       #measure {
-        overflow: clip visible;
+        overflow-x: clip;
+        overflow-y: visible;
       }
       #measure > * {
         margin: 8px 0;
-        overflow: clip visible;
+        overflow-x: clip;
+        overflow-y: visible;
       }
       #measure > *:last-child {
         margin-bottom: 0;
       }
 
       #measure > div * {
-        overflow: clip visible;
+        overflow-x: clip;
+        overflow-y: visible;
       }
       #head > *:first-child {
-        overflow: clip visible;
+        overflow-x: clip;
+        overflow-y: visible;
       }
     `;
     }
diff --git a/src/main.ts b/src/main.ts
index e3b22e8..b246994 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -231,10 +231,14 @@ class FoldEntityRow extends LitElement {
     }
 
     const el = this.shadowRoot.querySelector("#measure") as HTMLElement;
-    this.observer = new ResizeObserver(() => {
-      this.maxheight = el.scrollHeight;
-    });
-    this.observer.observe(el);
+    try {
+      this.observer = new ResizeObserver(() => {
+        this.maxheight = el.scrollHeight;
+      });
+      this.observer.observe(el);
+    } catch (_e) {
+      this.maxheight = 1e6;
+    }
   }
 
   connectedCallback(): void {
@@ -374,10 +378,10 @@ class FoldEntityRow extends LitElement {
       #items {
         padding: 0;
         margin: 0;
-        overflow: hidden;
         transition: max-height 0.2s ease-in-out;
         height: 100%;
-        overflow: clip visible;
+        overflow-x: clip;
+        overflow-y: visible;
       }
 
       #items.clip {
@@ -385,21 +389,25 @@ class FoldEntityRow extends LitElement {
       }
 
       #measure {
-        overflow: clip visible;
+        overflow-x: clip;
+        overflow-y: visible;
       }
       #measure > * {
         margin: 8px 0;
-        overflow: clip visible;
+        overflow-x: clip;
+        overflow-y: visible;
       }
       #measure > *:last-child {
         margin-bottom: 0;
       }
 
       #measure > div * {
-        overflow: clip visible;
+        overflow-x: clip;
+        overflow-y: visible;
       }
       #head > *:first-child {
-        overflow: clip visible;
+        overflow-x: clip;
+        overflow-y: visible;
       }
     `;
   }
diff --git a/test/views/2_cooperation.yaml b/test/views/2_cooperation.yaml
index d59e805..27c1554 100644
--- a/test/views/2_cooperation.yaml
+++ b/test/views/2_cooperation.yaml
@@ -91,6 +91,19 @@ cards:
               type: custom:fold-entity-row
               head: { entity: light.bed_light }
               open: true
+      - type: entities
+        entities:
+          - type: custom:hui-entity-filter-card
+            entities:
+              - light.bed_light
+              - light.ceiling_lights
+              - light.kitchen_lights
+            state_filter:
+              - "on"
+            card:
+              type: custom:fold-entity-row
+              head: { type: section, label: Section }
+              open: true
 
   - type: vertical-stack
     cards: