From 5c142ec34a8ca906c68b438852ed010d10c78009 Mon Sep 17 00:00:00 2001
From: pewdiepie-archdaemon <pewdiepie-archdaemon@users.noreply.github.com>
Date: Mon, 1 Jun 2026 14:19:07 +0900
Subject: [PATCH] Keep email reader height stable while loading

---
 static/js/emailLibrary.js | 12 ++++++++++--
 static/style.css          |  3 +++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/static/js/emailLibrary.js b/static/js/emailLibrary.js
index 9fa052b..fa27b4a 100644
--- a/static/js/emailLibrary.js
+++ b/static/js/emailLibrary.js
@@ -1821,9 +1821,13 @@ function _prefetchAdjacentEmails(card, count = 3) {
 async function _toggleCardPreview(card, em) {
   const grid = card.closest('.doclib-grid');
   const gridRect = grid?.getBoundingClientRect?.();
+  const modal = document.getElementById('email-lib-modal');
+  const modalContent = card.closest('.modal-content');
+  const modalRect = modalContent?.getBoundingClientRect?.();
   const currentRect = card.getBoundingClientRect();
   const stableOpenHeight = Math.max(
     currentRect.height || 0,
+    (modalRect?.height || 0) - 84,
     Math.min(Math.max(260, window.innerHeight * 0.56), gridRect?.height || window.innerHeight)
   );
 
@@ -1832,7 +1836,8 @@ async function _toggleCardPreview(card, em) {
     card.classList.remove('email-card-expanded');
     card.classList.remove('doclib-card-expanded');
     card.style.minHeight = '';
-    document.getElementById('email-lib-modal')?.classList.remove('email-reading');
+    modal?.classList.remove('email-reading');
+    modal?.style.removeProperty('--email-reading-modal-min-h');
     const reader = card.querySelector('.email-card-reader');
     if (reader) reader.remove();
     return;
@@ -1860,7 +1865,10 @@ async function _toggleCardPreview(card, em) {
   // Class hook on the modal so the header-hide / padding rules work on
   // browsers without :has() support (Firefox mobile) — the :has() versions
   // below stay as the desktop path.
-  document.getElementById('email-lib-modal')?.classList.add('email-reading');
+  if (modal && modalRect?.height) {
+    modal.style.setProperty('--email-reading-modal-min-h', `${Math.round(modalRect.height)}px`);
+  }
+  modal?.classList.add('email-reading');
 
   // Show loading reader with whirlpool spinner
   const reader = document.createElement('div');
diff --git a/static/style.css b/static/style.css
index 18164e7..1fb16d4 100644
--- a/static/style.css
+++ b/static/style.css
@@ -14396,6 +14396,9 @@ body.left-dock-active {
   display: flex !important;
   flex: 1 1 auto !important;
 }
+#email-lib-modal.email-reading .doclib-modal-content {
+  min-height: var(--email-reading-modal-min-h, auto);
+}
 #email-lib-modal .doclib-card.doclib-card-expanded {
   flex: 1 1 auto !important;
   height: 100% !important;