Column cell prompts on mobile (#9464)

packages/cells/style/inputarea.css

@@ -14,6 +14,10 @@
   overflow: hidden;
 }
 
+body[data-format='mobile'] .jp-InputArea {
+  flex-direction: column;
+}
+
 .jp-InputArea-editor {
   flex: 1 1 auto;
   overflow: hidden;
@@ -26,6 +30,10 @@
   background: var(--jp-cell-editor-background);
 }
 
+body[data-format='mobile'] .jp-InputArea-editor {
+  margin-left: var(--jp-notebook-padding);
+}
+
 .jp-InputPrompt {
   flex: 0 0 var(--jp-cell-prompt-width);
   color: var(--jp-cell-inprompt-font-color);
@@ -48,3 +56,8 @@
   -ms-user-select: none;
   user-select: none;
 }
+
+body[data-format='mobile'] .jp-InputPrompt {
+  flex: 0 0 auto;
+  text-align: left;
+}

packages/outputarea/style/base.css

@@ -24,6 +24,10 @@
   flex-direction: row;
 }
 
+body[data-format='mobile'] .jp-OutputArea-child {
+  flex-direction: column;
+}
+
 .jp-OutputPrompt {
   flex: 0 0 var(--jp-cell-prompt-width);
   color: var(--jp-cell-outprompt-font-color);
@@ -46,6 +50,11 @@
   user-select: none;
 }
 
+body[data-format='mobile'] .jp-OutputPrompt {
+  flex: 0 0 auto;
+  text-align: left;
+}
+
 .jp-OutputArea-output {
   height: auto;
   overflow: auto;
@@ -60,6 +69,10 @@
   flex-shrink: 1;
 }
 
+body[data-format='mobile'] .jp-OutputArea-child .jp-OutputArea-output {
+  margin-left: var(--jp-notebook-padding);
+}
+
 /**
  * Isolated output.
  */