Avoid use of flexbox (#11508)

jupyterlab · Dec 2, 2021 · 967f478 · 967f478
1 parent bc579c3
commit 967f478
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 30 deletions.
diff --git a/packages/cells/style/inputarea.css b/packages/cells/style/inputarea.css
@@ -9,18 +9,19 @@
 
 /* All input areas */
 .jp-InputArea {
-  display: flex;
-  flex-direction: row;
+  display: table;
   overflow: hidden;
 }
 
-body[data-format='mobile'] .jp-InputArea {
-  flex-direction: column;
-}
-
 .jp-InputArea-editor {
-  flex: 1 1 auto;
+  display: table-cell;
+  width: 100%;
   overflow: hidden;
+  vertical-align: top;
+}
+
+body[data-format='mobile'] .jp-InputArea-editor {
+  display: table-row;
 }
 
 .jp-InputArea-editor {
@@ -35,7 +36,9 @@ body[data-format='mobile'] .jp-InputArea-editor {
 }
 
 .jp-InputPrompt {
-  flex: 0 0 var(--jp-cell-prompt-width);
+  display: table-cell;
+  vertical-align: top;
+  min-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 +61,6 @@ body[data-format='mobile'] .jp-InputArea-editor {
 }
 
 body[data-format='mobile'] .jp-InputPrompt {
-  flex: 0 0 auto;
+  display: table-row;
   text-align: left;
 }
diff --git a/packages/cells/style/widget.css b/packages/cells/style/widget.css
@@ -77,11 +77,9 @@
 }
 
 .jp-CodeCell.jp-mod-outputsScrolled .jp-OutputArea-prompt {
-  flex: 0 0
-    calc(
-      var(--jp-cell-prompt-width) -
-        var(--jp-private-cell-scrolling-output-offset)
-    );
+  min-width: calc(
+    var(--jp-cell-prompt-width) - var(--jp-private-cell-scrolling-output-offset)
+  );
 }
 
 /*-----------------------------------------------------------------------------
@@ -93,7 +91,8 @@
 |----------------------------------------------------------------------------*/
 
 .jp-MarkdownOutput {
-  flex: 1 1 auto;
+  display: table-cell;
+  width: 100%;
   margin-top: 0;
   margin-bottom: 0;
   padding-left: var(--jp-code-padding);

diff --git a/packages/notebook/style/base.css b/packages/notebook/style/base.css
@@ -62,7 +62,6 @@
 
 .jp-Notebook .jp-Cell .jp-InputPrompt {
   cursor: move;
-  float: left;
 }
 
 /*-----------------------------------------------------------------------------

diff --git a/packages/outputarea/style/base.css b/packages/outputarea/style/base.css
@@ -20,16 +20,15 @@
 }
 
 .jp-OutputArea-child {
-  display: flex;
-  flex-direction: row;
-}
-
-body[data-format='mobile'] .jp-OutputArea-child {
-  flex-direction: column;
+  display: table;
+  width: 100%;
+  overflow: hidden;
 }
 
 .jp-OutputPrompt {
-  flex: 0 0 var(--jp-cell-prompt-width);
+  display: table-cell;
+  vertical-align: top;
+  min-width: 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);
@@ -51,11 +50,13 @@ body[data-format='mobile'] .jp-OutputArea-child {
 }
 
 body[data-format='mobile'] .jp-OutputPrompt {
-  flex: 0 0 auto;
+  display: table-row;
   text-align: left;
 }
 
 .jp-OutputArea-output {
+  display: table-cell;
+  width: 100%;
   height: auto;
   overflow: auto;
   user-select: text;
@@ -64,12 +65,8 @@ body[data-format='mobile'] .jp-OutputPrompt {
   -ms-user-select: text;
 }
 
-.jp-OutputArea-child .jp-OutputArea-output {
-  flex-grow: 1;
-  flex-shrink: 1;
-}
-
 body[data-format='mobile'] .jp-OutputArea-child .jp-OutputArea-output {
+  display: table-row;
   margin-left: var(--jp-notebook-padding);
 }
 
@@ -166,7 +163,7 @@ body.lm-mod-override-cursor .jp-OutputArea-output.jp-mod-isolated:before {
 
 .jp-OutputArea-output.jp-OutputArea-executeResult {
   margin-left: 0px;
-  flex: 1 1 auto;
+  width: 100%;
 }
 
 /* Text output with the Out[] prompt needs a top padding to match the