Attempt removing use of flexbox in the notebook DOM

jupyterlab · Nov 19, 2021 · 7170a9a · 7170a9a
1 parent 8a8c375
commit 7170a9a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 24 deletions.
diff --git a/packages/cells/style/collapser.css b/packages/cells/style/collapser.css
@@ -4,7 +4,8 @@
 |----------------------------------------------------------------------------*/
 
 .jp-Collapser {
-  flex: 0 0 var(--jp-cell-collapser-width);
+  display: table-cell;
+  width: var(--jp-cell-collapser-width);
   padding: 0px;
   margin: 0px;
   border: none;

diff --git a/packages/cells/style/inputarea.css b/packages/cells/style/inputarea.css
@@ -9,17 +9,12 @@
 
 /* All input areas */
 .jp-InputArea {
-  display: flex;
-  flex-direction: row;
   overflow: hidden;
-}
-
-body[data-format='mobile'] .jp-InputArea {
-  flex-direction: column;
+  font-size: 0; /* prevent extra margin bellow inline-block elements */
 }
 
 .jp-InputArea-editor {
-  flex: 1 1 auto;
+  width: calc(100% - var(--jp-cell-prompt-width));
   overflow: hidden;
 }
 
@@ -35,7 +30,8 @@ body[data-format='mobile'] .jp-InputArea-editor {
 }
 
 .jp-InputPrompt {
-  flex: 0 0 var(--jp-cell-prompt-width);
+  display: table-cell;
+  width: var(--jp-cell-prompt-width);
   color: var(--jp-cell-inprompt-font-color);
   font-family: var(--jp-cell-prompt-font-family);
   padding: var(--jp-code-padding);
@@ -58,6 +54,6 @@ body[data-format='mobile'] .jp-InputArea-editor {
 }
 
 body[data-format='mobile'] .jp-InputPrompt {
-  flex: 0 0 auto;
+  display: table-cell;
   text-align: left;
 }
diff --git a/packages/cells/style/placeholder.css b/packages/cells/style/placeholder.css
@@ -8,17 +8,16 @@
 |----------------------------------------------------------------------------*/
 
 .jp-Placeholder {
-  display: flex;
-  flex-direction: row;
-  flex: 1 1 auto;
+  display: table;
+  width: 100%;
 }
 
 .jp-Placeholder-prompt {
   box-sizing: border-box;
 }
 
 .jp-Placeholder-content {
-  flex: 1 1 auto;
+  width: 100%;
   border: none;
   background: transparent;
   height: 20px;

diff --git a/packages/cells/style/widget.css b/packages/cells/style/widget.css
@@ -29,8 +29,8 @@
 
 .jp-Cell-inputWrapper,
 .jp-Cell-outputWrapper {
-  display: flex;
-  flex-direction: row;
+  display: table;
+  width: 100%;
   padding: 0px;
   margin: 0px;
   /* Added to reveal the box-shadow on the input and output collapsers. */
@@ -40,7 +40,8 @@
 /* Only input/output areas inside cells */
 .jp-Cell-inputArea,
 .jp-Cell-outputArea {
-  flex: 1 1 auto;
+  display: table-cell;
+  width: calc(100% - var(--jp-cell-collapser-width));
 }
 
 /*-----------------------------------------------------------------------------
@@ -76,11 +77,10 @@
 }
 
 .jp-CodeCell.jp-mod-outputsScrolled .jp-OutputArea-prompt {
-  flex: 0 0
-    calc(
-      var(--jp-cell-prompt-width) -
-        var(--jp-private-cell-scrolling-output-offset)
-    );
+  display: inline-block;
+  width: calc(
+    var(--jp-cell-prompt-width) - var(--jp-private-cell-scrolling-output-offset)
+  );
 }
 
 /*-----------------------------------------------------------------------------
@@ -92,7 +92,8 @@
 |----------------------------------------------------------------------------*/
 
 .jp-MarkdownOutput {
-  flex: 1 1 auto;
+  display: table-cell;
+  width: 100%;
   margin-top: 0;
   margin-bottom: 0;
   padding-left: var(--jp-code-padding);
@@ -119,7 +120,7 @@
 }
 
 .jp-MarkdownCell:hover .jp-collapseHeadingButton {
-  display: flex;
+  display: table;
   min-height: var(--jp-cell-collapser-min-height);
   position: absolute;
   right: 0;