Move bottom right buttons to vertical display

editor/editor.js

@@ -88,7 +88,7 @@ function hideButtons(box) {
   if (box.checked) {
     buttons.forEach((button) => button.style.display = "none");
   } else {
-    buttons.forEach((button) => button.style.display = "inline");
+    buttons.forEach((button) => button.style.display = "block");
   }
 }
 

editor/index.html

@@ -16,8 +16,9 @@
 </div>
 
 <div id="bottomleft-buttons">
-  <label for="hide">Hide Buttons</label>
-  <input type="checkbox" id="hide" onclick="hideButtons(this)" /><br />
+  <label for="hide">Hide Buttons
+    <input type="checkbox" id="hide" onclick="hideButtons(this)" />
+  </label>
   <!-- Seemingly random attributes necessary for TinyUrl to accept the request -->
   <form action="http://tinyurl.com/create.php" method="get" target="_blank">
 		<input type="hidden" id="source" name="source" value="indexpage">

editor/main.css

@@ -41,6 +41,16 @@ a, button {
   position: absolute;
   bottom: 0;
   left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+#bottomleft-buttons button {
+  display: block;
+  margin: 0;
+  width: 100%;
+  border-top: 1px solid limegreen;
 }
 
 #topright-buttons {
@@ -54,13 +64,6 @@ form {
 }
 
 label, input[type="checkbox"] {
-  vertical-align: middle;
-}
-
-label {
-  padding: 5px;
-  padding-bottom: 0;
-  padding-top: 0;
-  background: white;
-  color: black;
+  vertical-align: baseline;
+  text-align: center;
 }