Editor works a little better on mobile

asyncjs · Jul 3, 2024 · 2e1f625 · 2e1f625
1 parent 672f58c
commit 2e1f625
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/public/css/app.css b/public/css/app.css
@@ -211,21 +211,20 @@ code {
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  flex-wrap: wrap;
   background: rgb(255,255,255,0.9);
 }
 
 .editor {
+  flex-basis: 50%;
   flex-grow: 1;
-  min-width: 300px;
 }
 
 .right {
-  min-width: 200px;
-  width: 50%;
   display: flex;
+  flex-basis: 50%;
   flex-direction: column;
-  height: 100%;
+  max-height: 100%;
+  min-height: 0;
 }
 
 .console {
@@ -248,3 +247,9 @@ code {
   flex-direction: row;
   gap: 2rem;
 }
+
+@media (width <= 600px) {
+.editor-container {
+  flex-direction: column;
+}
+}
diff --git a/views/play.html b/views/play.html
@@ -82,9 +82,6 @@ <h4>Oops, your entry is incorrect</h4>
                   <div class="right">
                     <div class="controls">
                       <button type="submit" class="btn btn-lg btn-info" id="submit">Submit Entry</button>
-                      <div>
-                        Write your code in the editor. Hit "Submit Entry" to submit your entry to the leaderboard. Use the test field to try out your code and the results will appear below. If you reload the page we will remember the last code you entered.
-                      </div>
                     </div>
                     <div id="console" class="console"></div>
                     <div class="test-container">