Make the mobile layout even more compact

README.md

@@ -75,7 +75,7 @@ Support for existing JupyterLab themes!
 
 ### Compact View on Mobile Devices 📱
 
-![mobile](https://user-images.githubusercontent.com/591645/101954969-48424780-3bfd-11eb-8ce5-85f3d2d3ae4f.gif)
+![mobile](https://user-images.githubusercontent.com/591645/101995448-2793f380-3cca-11eb-8971-067dd068ccbe.gif)
 
 ### Support for federated extensions 🧩
 

packages/notebook-extension/style/base.css

@@ -85,8 +85,27 @@
   white-space: nowrap;
 }
 
-@media only screen and (max-width: 760px) {
-  .jp-ClassicCheckpoint {
-    display: none;
-  }
+/* Mobile View */
+
+body[data-format='mobile'] .jp-ClassicCheckpoint {
+  display: none;
+}
+
+body[data-format='mobile'] .jp-InputArea,
+body[data-format='mobile'] .jp-OutputArea-child {
+  flex-direction: column;
+}
+
+body[data-format='mobile'] .jp-InputPrompt,
+body[data-format='mobile'] .jp-OutputPrompt {
+  flex: 0 0 auto;
+  text-align: left;
+}
+
+body[data-format='mobile'] .jp-InputArea-editor {
+  margin-left: var(--jp-notebook-padding);
+}
+
+body[data-format='mobile'] .jp-OutputArea-child .jp-OutputArea-output {
+  margin-left: var(--jp-notebook-padding);
 }