Merge pull request #14 from jtpio/fix-mobile-layout

Tweak CSS for smaller viewports
jtpio · Feb 3, 2022 · 3b65ab8 · 3b65ab8 · vercel · Feb 3, 2022
2 parents 743674e + ed674ba
commit 3b65ab8
Showing 1 changed file with 28 additions and 5 deletions.
diff --git a/style/base.css b/style/base.css
@@ -1,11 +1,13 @@
-#top-panel-wrapper, #menu-panel-wrapper, #spacer-widget {
-	display: none!important;
+#top-panel-wrapper,
+#menu-panel-wrapper,
+#spacer-widget {
+  display: none !important;
 }
 
 #main-panel {
-  top: 0px!important;
-  height: 100%!important;
-	max-width: unset!important;
+  top: 0px !important;
+  height: 100% !important;
+  max-width: unset !important;
 }
 
 .jp-CodeConsole-promptCell .jp-InputPrompt {
@@ -20,3 +22,24 @@
   padding: 0 var(--jp-console-padding) 0 0;
   color: var(--jp-ui-font-color0);
 }
+
+.jp-InputPrompt {
+  flex: 0 0 42px;
+}
+
+.jp-CodeConsole-input .jp-InputCollapser {
+  display: none;
+}
+
+.jp-InputArea {
+  flex-direction: row;
+}
+
+.jp-InputArea-editor,
+.jp-OutputArea-child .jp-OutputArea-output {
+  margin-left: unset;
+}
+
+.jp-OutputArea-child {
+  flex-direction: row;
+}