Restore horizontal scrolling of outputs for Firefox (#15171)

* Add printed notebook test

* Revert CSS changes to table except when using media print

* Wait for MathJax message to disappear

* Update Playwright Snapshots

* Restore mobile snapshot

* Fix style for mobile layout

* Mobile: adjust margins and disable collapser overlay

* Update Playwright Snapshots

* Revert mermaid snapshot update

* Workaround issue with notebook-mobile test

* Update snapshot for mobile layout

* Link the issue to setCell

Co-authored-by: Jeremy Tuloup <jeremy.tuloup@gmail.com>

* Update Playwright Snapshots

* Revert incorrect completer snapshot update

---------

Co-authored-by: krassowski <5832902+krassowski@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Jeremy Tuloup <jeremy.tuloup@gmail.com>

galata/test/jupyterlab/notebook-mobile.test.ts

@@ -14,6 +14,9 @@ test.describe('Notebook Layout on Mobile', () => {
 
   test('Execute code cell', async ({ page }) => {
     await page.sidebar.close('left');
+    // TODO: calling `setCell` just once leads to very flaky test
+    // See https://github.com/jupyterlab/jupyterlab/issues/15252 for more information
+    await page.notebook.setCell(0, 'code', 'print("hello")');
     await page.notebook.setCell(0, 'code', 'print("hello")');
     await page.notebook.addCell('code', '2 * 3');
     await page.notebook.runCellByCell();

galata/test/jupyterlab/print.test.ts

@@ -0,0 +1,58 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { expect, test } from '@jupyterlab/galata';
+import * as path from 'path';
+
+test.use({ autoGoto: false });
+
+const fileName = 'simple_notebook.ipynb';
+
+test.describe('Print layout', () => {
+  test('Notebook', async ({ page, tmpPath }) => {
+    await page.emulateMedia({ media: 'print' });
+    await page.contents.uploadFile(
+      path.resolve(__dirname, `./notebooks/${fileName}`),
+      `${tmpPath}/${fileName}`
+    );
+    await page.contents.uploadFile(
+      path.resolve(__dirname, './notebooks/WidgetArch.png'),
+      `${tmpPath}/WidgetArch.png`
+    );
+
+    await page.goto();
+
+    await page.notebook.openByPath(`${tmpPath}/${fileName}`);
+
+    await page.getByText('Python 3 (ipykernel) | Idle').waitFor();
+
+    await page.notebook.run();
+
+    let printedNotebookURL = '';
+    await Promise.all([
+      page.waitForRequest(
+        async request => {
+          const url = request.url();
+          if (url.match(/\/nbconvert\//) !== null) {
+            printedNotebookURL = url;
+            return true;
+          }
+          return false;
+        },
+        { timeout: 1000 }
+      ),
+      page.keyboard.press('Control+P')
+    ]);
+
+    const newPage = await page.context().newPage();
+
+    await newPage.goto(printedNotebookURL, { waitUntil: 'networkidle' });
+
+    // Wait until MathJax loading message disappears
+    const mathJaxMessage = newPage.locator('#MathJax_Message');
+    await expect(mathJaxMessage).toHaveCount(1);
+    await mathJaxMessage.waitFor({ state: 'hidden' });
+
+    expect(await newPage.screenshot()).toMatchSnapshot('printed-notebook.png');
+  });
+});

packages/cells/style/inputarea.css

@@ -9,16 +9,15 @@
 
 /* All input areas */
 .jp-InputArea {
-  display: table;
-  table-layout: fixed;
+  display: flex;
+  flex-direction: row;
   width: 100%;
   overflow: hidden;
 }
 
 .jp-InputArea-editor {
-  display: table-cell;
+  flex: 1 1 auto;
   overflow: hidden;
-  vertical-align: top;
 
   /* This is the non-active, default styling */
   border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
@@ -27,8 +26,7 @@
 }
 
 .jp-InputPrompt {
-  display: table-cell;
-  vertical-align: top;
+  flex: 0 0 var(--jp-cell-prompt-width);
   width: var(--jp-cell-prompt-width);
   color: var(--jp-cell-inprompt-font-color);
   font-family: var(--jp-cell-prompt-font-family);
@@ -52,17 +50,40 @@
   user-select: none;
 }
 
+/*-----------------------------------------------------------------------------
+| Print
+|----------------------------------------------------------------------------*/
+@media print {
+  .jp-InputArea {
+    display: table;
+    table-layout: fixed;
+  }
+
+  .jp-InputArea-editor {
+    display: table-cell;
+    vertical-align: top;
+  }
+
+  .jp-InputPrompt {
+    display: table-cell;
+    vertical-align: top;
+  }
+}
+
 /*-----------------------------------------------------------------------------
 | Mobile
 |----------------------------------------------------------------------------*/
 @media only screen and (width <= 760px) {
+  .jp-InputArea {
+    flex-direction: column;
+  }
+
   .jp-InputArea-editor {
-    display: table-row;
-    margin-left: var(--jp-notebook-padding);
+    margin-left: var(--jp-code-padding);
   }
 
   .jp-InputPrompt {
-    display: table-row;
+    flex: 0 0 auto;
     text-align: left;
   }
 }

packages/cells/style/widget.css

@@ -102,6 +102,11 @@
   width: calc(
     var(--jp-cell-prompt-width) - var(--jp-private-cell-scrolling-output-offset)
   );
+  flex: 0 0
+    calc(
+      var(--jp-cell-prompt-width) -
+        var(--jp-private-cell-scrolling-output-offset)
+    );
 }
 
 .jp-CodeCell.jp-mod-outputsScrolled .jp-OutputArea-promptOverlay {
@@ -117,7 +122,7 @@
 |----------------------------------------------------------------------------*/
 
 .jp-MarkdownOutput {
-  display: table-cell;
+  flex: 1 1 auto;
   width: 100%;
   margin-top: 0;
   margin-bottom: 0;
@@ -235,4 +240,8 @@ cell outputs.
   .jp-Cell-outputWrapper {
     display: block;
   }
+
+  .jp-MarkdownOutput {
+    display: table-cell;
+  }
 }

packages/notebook/style/base.css

@@ -64,6 +64,7 @@
 
 .jp-Notebook .jp-Cell .jp-InputPrompt {
   cursor: move;
+  float: left;
 }
 
 /*-----------------------------------------------------------------------------
@@ -458,3 +459,12 @@ div.jp-Cell-Placeholder-content-2 {
 div.jp-Cell-Placeholder-content-3 {
   top: 140px;
 }
+
+/*-----------------------------------------------------------------------------
+| Printing
+|----------------------------------------------------------------------------*/
+@media print {
+  .jp-Notebook .jp-Cell .jp-InputPrompt {
+    float: none;
+  }
+}

packages/outputarea/style/base.css

@@ -13,14 +13,15 @@
 }
 
 .jp-OutputArea-child {
-  display: table;
-  table-layout: fixed;
+  display: flex;
+  flex-direction: row;
   width: 100%;
   overflow: hidden;
 }
 
 .jp-OutputPrompt {
   width: var(--jp-cell-prompt-width);
+  flex: 0 0 var(--jp-cell-prompt-width);
   color: var(--jp-cell-outprompt-font-color);
   font-family: var(--jp-cell-prompt-font-family);
   padding: var(--jp-code-padding);
@@ -43,13 +44,7 @@
   user-select: none;
 }
 
-.jp-OutputArea-prompt {
-  display: table-cell;
-  vertical-align: top;
-}
-
 .jp-OutputArea-output {
-  display: table-cell;
   width: 100%;
   height: auto;
   overflow: auto;
@@ -91,6 +86,11 @@
   box-shadow: inset 0 0 1px var(--jp-inverse-layout-color0);
 }
 
+.jp-OutputArea-child .jp-OutputArea-output {
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
 /**
  * Isolated output.
  */
@@ -198,6 +198,7 @@ body.lm-mod-override-cursor .jp-OutputArea-output.jp-mod-isolated::before {
 .jp-OutputArea-output.jp-OutputArea-executeResult {
   margin-left: 0;
   width: 100%;
+  flex: 1 1 auto;
 }
 
 /* Text output with the Out[] prompt needs a top padding to match the
@@ -267,22 +268,36 @@ body.lm-mod-override-cursor .jp-OutputArea-output.jp-mod-isolated::before {
 
 @media print {
   .jp-OutputArea-child {
+    display: table;
+    table-layout: fixed;
     break-inside: avoid-page;
   }
+
+  .jp-OutputArea-prompt {
+    display: table-cell;
+    vertical-align: top;
+  }
+
+  .jp-OutputArea-output {
+    display: table-cell;
+  }
 }
 
 /*-----------------------------------------------------------------------------
 | Mobile
 |----------------------------------------------------------------------------*/
 @media only screen and (width <= 760px) {
+  .jp-OutputArea-child {
+    flex-direction: column;
+  }
+
   .jp-OutputPrompt {
-    display: table-row;
+    flex: 0 0 auto;
     text-align: left;
   }
 
-  .jp-OutputArea-child .jp-OutputArea-output {
-    display: table-row;
-    margin-left: var(--jp-notebook-padding);
+  .jp-OutputArea-promptOverlay {
+    display: none;
   }
 }