From 58da72d344f5ee933546d20290db7954d1d0306d Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell@unturf.com>
Date: Sat, 20 Dec 2025 07:07:00 -0500
Subject: [PATCH] Fix overflow hidden cutting off avatars on mobile

---
 remarkbox/static/css/common.css |  9 +++++----
 remarkbox/static/js/custom.js   | 11 +++++++++++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/remarkbox/static/css/common.css b/remarkbox/static/css/common.css
index 0a423a5..013398f 100644
--- a/remarkbox/static/css/common.css
+++ b/remarkbox/static/css/common.css
@@ -453,14 +453,15 @@ form.node-action {
 }
 
 /* Node children collapse/expand animation */
-[id^="node-children-"] {
+[id^="node-children-"].toggle-collapsed {
   overflow: hidden;
-  max-height: 10000px;
+  max-height: 0;
   transition: max-height 0.8s ease-out;
 }
 
-[id^="node-children-"].toggle-collapsed {
-  max-height: 0;
+[id^="node-children-"].toggle-expanding {
+  overflow: hidden;
+  transition: max-height 0.8s ease-out;
 }
 
 .my-namespaces-div {
diff --git a/remarkbox/static/js/custom.js b/remarkbox/static/js/custom.js
index 8003e6f..cf83576 100644
--- a/remarkbox/static/js/custom.js
+++ b/remarkbox/static/js/custom.js
@@ -50,10 +50,21 @@ function toggle(target, button, off_text, on_text) {
     // Handle node-children collapse (visible by default, toggle to hide)
     if (target.indexOf('node-children-') === 0) {
         if (el.classList.contains('toggle-collapsed')) {
+            // Expanding: set max-height to scrollHeight, animate, then remove classes
+            el.classList.add('toggle-expanding');
+            el.style.maxHeight = el.scrollHeight + 'px';
             el.classList.remove('toggle-collapsed');
             btn.textContent = on_text;
+            setTimeout(function() {
+                el.classList.remove('toggle-expanding');
+                el.style.maxHeight = '';
+            }, 800);
         } else {
+            // Collapsing: set max-height to current height, then collapse
+            el.style.maxHeight = el.scrollHeight + 'px';
+            el.offsetHeight; // force reflow
             el.classList.add('toggle-collapsed');
+            el.style.maxHeight = '';
             btn.textContent = off_text;
         }
         return;