From e5d0cfd50f51dc0a16617634e379d57046224f57 Mon Sep 17 00:00:00 2001
From: Sylvain Corlay <sylvain.corlay@gmail.com>
Date: Wed, 8 Dec 2021 14:16:55 +0100
Subject: [PATCH] Prevent page breaks in outputs when printing (#1679)

---
 .../nbconvert/templates/lab/index.html.j2     | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/share/jupyter/nbconvert/templates/lab/index.html.j2 b/share/jupyter/nbconvert/templates/lab/index.html.j2
index 838620f8e..1eb714862 100644
--- a/share/jupyter/nbconvert/templates/lab/index.html.j2
+++ b/share/jupyter/nbconvert/templates/lab/index.html.j2
@@ -41,9 +41,11 @@
     {{ resources.include_css("static/theme-light.css") }}
 {% endif %}
 <style type="text/css">
+/* Misc */
 a.anchor-link {
    display: none;
 }
+
 .highlight  {
     margin: 0.4em;
 }
@@ -57,10 +59,60 @@ a.anchor-link {
     overflow: hidden;
 }
 
+/* Output area styling: using table instead of flexbox so that we can use break-inside property */
+
+.jp-CodeCell.jp-mod-outputsScrolled .jp-OutputArea-prompt {
+  min-width: calc(
+    var(--jp-cell-prompt-width) - var(--jp-private-cell-scrolling-output-offset)
+  );
+}
+
+.jp-OutputArea-child {
+  display: table;
+  width: 100%;
+}
+
+.jp-OutputPrompt {
+  display: table-cell;
+  vertical-align: top;
+  min-width: var(--jp-cell-prompt-width);
+}
+
+body[data-format='mobile'] .jp-OutputPrompt {
+  display: table-row;
+}
+
+.jp-OutputArea-output {
+  display: table-cell;
+  width: 100%;
+}
+
+body[data-format='mobile'] .jp-OutputArea-child .jp-OutputArea-output {
+  display: table-row;
+}
+
+.jp-OutputArea-output.jp-OutputArea-executeResult {
+  width: 100%;
+}
+
+/* block wrapper: using block instead of flexbox so that we can use break-inside property
+   note: in the case of JupyterLab, wrappers also include collapsers, hence the flexbox.
+ */
+
+.jp-Cell-inputWrapper, .jp-Cell-outputWrapper {
+  display: block;
+}
+
+/* Media print rules */
+
 @media print {
   body {
     margin: 0;
   }
+
+  .jp-OutputArea-child {
+    break-inside: avoid-page;
+  }
 }
 </style>