Backport PR #15322: Fix collapsed cells styling (#15327)

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

galata/test/jupyterlab/cells.test.ts

@@ -0,0 +1,34 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { expect, galata, test } from '@jupyterlab/galata';
+import * as path from 'path';
+
+const fileName = 'simple_notebook.ipynb';
+
+test.describe('Cells', () => {
+  test.beforeEach(async ({ page, request, tmpPath }) => {
+    const contents = galata.newContentsHelper(request);
+    await contents.uploadFile(
+      path.resolve(__dirname, `./notebooks/${fileName}`),
+      `${tmpPath}/${fileName}`
+    );
+    await contents.uploadFile(
+      path.resolve(__dirname, './notebooks/WidgetArch.png'),
+      `${tmpPath}/WidgetArch.png`
+    );
+
+    await page.notebook.openByPath(`${tmpPath}/${fileName}`);
+    await page.notebook.activate(fileName);
+  });
+
+  test('should collapse a cell', async ({ page }) => {
+    await page.notebook.run();
+
+    await page.locator('.jp-Cell-inputCollapser').nth(2).click();
+
+    expect(await page.locator('.jp-Cell').nth(2).screenshot()).toMatchSnapshot(
+      'collapsed-cell.png'
+    );
+  });
+});

packages/cells/style/placeholder.css

@@ -8,18 +8,18 @@
 |----------------------------------------------------------------------------*/
 
 .jp-Placeholder {
-  display: table;
-  table-layout: fixed;
+  display: flex;
+  flex-direction: row;
   width: 100%;
 }
 
 .jp-Placeholder-prompt {
-  display: table-cell;
+  flex: 0 0 var(--jp-cell-prompt-width);
   box-sizing: border-box;
 }
 
 .jp-Placeholder-content {
-  display: table-cell;
+  flex: 1 1 auto;
   padding: 4px 6px;
   border: 1px solid transparent;
   border-radius: 0;
@@ -61,3 +61,21 @@
   border-color: var(--jp-cell-editor-border-color);
   background: var(--jp-cell-editor-background);
 }
+
+/*-----------------------------------------------------------------------------
+| Print
+|----------------------------------------------------------------------------*/
+@media print {
+  .jp-Placeholder {
+    display: table;
+    table-layout: fixed;
+  }
+
+  .jp-Placeholder-content {
+    display: table-cell;
+  }
+
+  .jp-Placeholder-prompt {
+    display: table-cell;
+  }
+}