From 3357389309057e8172fe5b161eceb4da5de12bbc Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Fri, 30 Dec 2022 17:36:49 +1000
Subject: [PATCH] Fix some regressions with the graphs when printing

- page-break avoidance needs to be moved to the wrapping TitledContainer
- grid has to be disabled, as it prevents page breaks from working, and
shows too many columns (https://forums.ankiweb.net/t/stats-save-as-pdf-problems-2-1-55/25773)
- content underflowed the top header
---
 ts/components/TitledContainer.svelte | 1 +
 ts/graphs/Graph.svelte               | 2 --
 ts/graphs/GraphsPage.svelte          | 6 ++++++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/ts/components/TitledContainer.svelte b/ts/components/TitledContainer.svelte
index 185f2cc0d..e65f1441f 100644
--- a/ts/components/TitledContainer.svelte
+++ b/ts/components/TitledContainer.svelte
@@ -64,6 +64,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             }
         }
         transition: box-shadow 0.2s ease-in-out;
+        page-break-inside: avoid;
     }
     h1 {
         border-bottom: 1px solid var(--border);
diff --git a/ts/graphs/Graph.svelte b/ts/graphs/Graph.svelte
index 530376c0f..fb8f2b177 100644
--- a/ts/graphs/Graph.svelte
+++ b/ts/graphs/Graph.svelte
@@ -21,8 +21,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     @use "sass/elevation" as *;
     .graph {
-        page-break-inside: avoid;
-
         /* See graph-styles.ts for constants referencing global styles */
         :global(.graph-element-clickable) {
             cursor: pointer;
diff --git a/ts/graphs/GraphsPage.svelte b/ts/graphs/GraphsPage.svelte
index 7878d2693..88d0d169e 100644
--- a/ts/graphs/GraphsPage.svelte
+++ b/ts/graphs/GraphsPage.svelte
@@ -78,6 +78,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         @media only screen and (max-width: 600px) {
             font-size: 12px;
         }
+
+        @media only print {
+            // grid layout does not honor page-break-inside
+            display: block;
+            margin-top: 3em;
+        }
     }
 
     .spacer {