From 898da37d47b826f02f1b71fcba67e962cba9e08b Mon Sep 17 00:00:00 2001
From: Roland <roland@learningselfreliance.com>
Date: Tue, 9 Jun 2026 19:44:35 -0600
Subject: [PATCH] Fixing bug where zim articles were not aligned in modals.

---
 app/src/App.css           | 7 +++++++
 app/src/components/Zim.js | 2 ++
 2 files changed, 9 insertions(+)

diff --git a/app/src/App.css b/app/src/App.css
index 4955af5e..a6a8855f 100644
--- a/app/src/App.css
+++ b/app/src/App.css
@@ -160,6 +160,13 @@ input:checked + .slider:before {
     justify-content: center;
 }
 
+/* Fresnel (Media) wraps iframes in a div which would otherwise shrink to the
+   default iframe size; make it fill the preview so the iframe's 100% works. */
+.preview-fit .fresnel-container {
+    width: 100%;
+    height: 100%;
+}
+
 td.file-path {
     cursor: pointer;
 }
diff --git a/app/src/components/Zim.js b/app/src/components/Zim.js
index 565d0608..c897ceeb 100644
--- a/app/src/components/Zim.js
+++ b/app/src/components/Zim.js
@@ -194,6 +194,8 @@ const ZimSearchEntry = ({zimId, onTag, onUntag, entry}) => {
             <Modal.Content>
                 <div className='preview-fit'>
                     <ZimViewer src={url} style={{
+                        // Override IframeViewer's `fixed` so the iframe stays inside the Modal.
+                        position: 'static',
                         height: '100%', width: '100%', border: 'none',
                         // Use white to avoid iframe displaying with dark-theme.
                         backgroundColor: '#ffffff',