Stylistic changes

static/crossroad.css

@@ -2,6 +2,7 @@
     --red: #cb0b0b;
     --blue: #2081c3;
     --transparent-black: #0008;
+    --xl: 4em;
     --large: 2em;
     --medium: 1em;
 }
@@ -53,6 +54,10 @@ abbr[title] {
     text-decoration-color: var(--blue);
 }
 
+.align-start {
+    text-align: start;
+}
+
 .flex-vcenter {
     display: flex;
     flex-direction: column;
@@ -79,6 +84,11 @@ abbr[title] {
     flex-direction: row-reverse;
 }
 
+.flex-column {
+    display: flex;
+    flex-direction: column;
+}
+
 .flex-column-reverse {
     display: flex;
     flex-direction: column-reverse;
@@ -91,6 +101,10 @@ abbr[title] {
     height: 100%;
 }
 
+.wfit-content {
+    width: fit-content;
+}
+
 .half-width {
     min-width: 50%;
 }
@@ -143,4 +157,8 @@ abbr[title] {
 .inlineIcon {
     height: var(--medium);
     vertical-align: text-top;
+}
+
+.buttonPanel>* {
+    margin-top: min(var(--xl), 6vh);
 }

static/crossroad.html

@@ -23,16 +23,17 @@
                 <img src="/static/nekomata_small.png" alt="Nekomata Logo" class="logo" />
             </header>
             <div class="flex-row">
-                <div class="half-width">
+                <center class="half-width">
-                    <form id="instanceSelectForm"></form>
+                    <form id="instanceSelectForm" class="align-start wfit-content"></form>
                     <br>
                     <button onclick="showAddInstanceDialog()">Add an instance</button>
-                </div>
+                </center>
                 <div class="half-width">
                     <div class="flex-hcenter">
-                        <div class="flex-vevenly">
+                        <div class="flex-column buttonPanel">
                             <button id="redirect">Redirect</button>
                             <button id="redirectAlways">Redirect always</button>
+                            <a href="/">Manage instances</a>
                         </div>
                     </div>
                 </div>