EPUB: Fix images becoming two narrow in one-column view

zotero · Jan 3, 2024 · 8e2d41c · 8e2d41c · AbeJellinek · Jan 4, 2024
1 parent 2d74fe3
commit 8e2d41c
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/src/dom/epub/stylesheets/content.css b/src/dom/epub/stylesheets/content.css
@@ -101,21 +101,24 @@ body.flow-mode-paginated > .sections {
 }
 
 body.flow-mode-paginated > .sections.spread-mode-none {
-	max-width: 800px;
+    --column-width: calc(min(800px, 100vw - 80px));
     column-width: 800px;
 	column-gap: 100vw;
+    max-width: 800px;
 }
 
 body.flow-mode-paginated > .sections.spread-mode-odd {
+    --column-width: calc(50vw - 80px);
 	column-width: calc(50vw - 80px);
 }
 
 @media (max-width: 800px) {
 	body.flow-mode-paginated > .sections {
-        max-width: 800px;
+        --column-width: calc(min(800px, 100vw - 80px));
         column-width: 800px;
         column-gap: 100vw;
-	}
+        max-width: 800px;
+    }
 }
 
 body.flow-mode-paginated > .sections > .section-container {
@@ -130,7 +133,7 @@ body.flow-mode-paginated > .sections > .section-container.hidden {
 
 body.flow-mode-paginated replaced-body img, body.flow-mode-paginated replaced-body svg,
 body.flow-mode-paginated replaced-body audio, body.flow-mode-paginated replaced-body video {
-	max-width: calc(50vw - 80px) !important;
+	max-width: var(--column-width) !important;
     max-height: calc(100vh - 80px) !important;
     object-fit: contain;
 }