From 9449c9bcb22a6b33fad78471fdf972472c823000 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Sat, 14 Jan 2023 13:41:28 +0100
Subject: [PATCH] Refine background image handling

Giving the toolbar body the main webview height ensures background-size: cover behaves exactly the same.

To prevent an override of other background properties, users are advised to only set background-images via the background-image property, not the background shorthand.
---
 qt/aqt/toolbar.py         | 26 +++++++++++++++++++++++---
 ts/reviewer/reviewer.scss |  3 ++-
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/qt/aqt/toolbar.py b/qt/aqt/toolbar.py
index ea820ff08..c9a7b9e7e 100644
--- a/qt/aqt/toolbar.py
+++ b/qt/aqt/toolbar.py
@@ -133,25 +133,45 @@ class TopWebView(ToolbarWebView):
         if self.mw.pm.minimalist_mode():
             return
 
-        def set_background(val: str) -> None:
+        def set_background(computed: str) -> None:
             # remove offset from copy
-            background = re.sub(r"-\d+px ", "0%", val)
+            background = re.sub(r"-\d+px ", "0%", computed)
+            # ensure alignment with main webview
+            background = re.sub(r"\sfixed", "", background)
             # change computedStyle px value back to 100vw
             background = re.sub(r"\d+px", "100vw", background)
 
             self.eval(
-                f"""document.body.style.setProperty("background", '{background}'); """
+                f"""
+                    document.body.style.setProperty("background", '{background}');
+                """
             )
+            self.set_body_height(self.mw.web.height())
+
             # offset reviewer background by toolbar height
             self.mw.web.eval(
                 f"""document.body.style.setProperty("background-position-y", "-{self.web_height}px"); """
             )
 
+
         self.mw.web.evalWithCallback(
             """window.getComputedStyle(document.body).background; """,
             set_background,
         )
 
+    def set_body_height(self, height: int) -> None:
+        self.eval(
+            f"""document.body.style.setProperty("min-height", "{self.mw.web.height()}px"); """
+        )
+        
+    def resizeEvent(self, event: QResizeEvent) -> None:
+        super().resizeEvent(event)
+
+        self.mw.web.evalWithCallback(
+            """window.innerHeight; """,
+            self.set_body_height,
+        )
+
 
 class BottomWebView(ToolbarWebView):
     def __init__(self, mw: aqt.AnkiQt, title: str) -> None:
diff --git a/ts/reviewer/reviewer.scss b/ts/reviewer/reviewer.scss
index 086b84245..5f1e9d97f 100644
--- a/ts/reviewer/reviewer.scss
+++ b/ts/reviewer/reviewer.scss
@@ -11,8 +11,9 @@ body {
     margin: 20px;
     overflow-wrap: break-word;
     // default background setting to fit with toolbar
-    background-size: 100vw;
+    background-size: cover;
     background-repeat: no-repeat;
+    background-position: top;
     background-attachment: fixed;
 }