style: slightly less hardcoded height layout

Basically by making v5shoutbox a flexbox so that the middle region gets
the correct height automatically.

index.html

@@ -10,10 +10,9 @@
   <div id="v5shoutbox">
     <header>
       <div class="status"></div>
-      <div class="left-header">
-        <div class="channel-buttons"></div>
-        <a class="show-log" role="button">Log</a>
-      </div>
+      <div class="grow"></div>
+      <div class="channel-buttons"></div>
+      <a class="show-log" role="button">Log</a>
     </header>
     <div class="channels">
       <div data-channel="\login">

style.css

@@ -1,20 +1,35 @@
+/* Standalone page's configuration */
+
 body {
   height: 100vh;
   margin: 0;
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
-  line-height: 1.5;
+}
+
+#v5shoutbox {
+  height: 100vh;
+}
+
+/* Shoutbox-only style */
+
+#v5shoutbox {
+  display: flex;
+  flex-flow: column;
   font-size: 12px;
   color: #333;
 }
 
-header {
+#v5shoutbox header {
   height: 2em;
   display: flex;
-  justify-content: space-between;
-  padding: 1px 4px;
-  padding-right: 10px;
+  align-items: center;
   background: #ececec;
   border: 1px solid rgba(0, 0, 0, .15);
+  gap: 4px;
+  padding: 0 4px;
+}
+#v5shoutbox header .grow {
+  flex-grow: 1;
 }
 
 a {
@@ -28,18 +43,12 @@ a:active, a:hover, a:focus {
 }
 
 pre {
-  width: 100%;
-  height: 100%;
-  max-height: 90vh;
   overflow: auto;
   word-wrap: normal;
   word-break: break-word;
   white-space: pre-wrap;
-  justify-self: flex-start;
-}
-
-#v5shoutbox {
-  height: 100%
+  margin: 0;
+  padding: 4px;
 }
 
 .channel-buttons button {
@@ -69,39 +78,37 @@ pre {
 }
 
 .channels {
-  height: calc(100% - 4.7em);
-  display: flex;
-  justify-content: space-around;
+  flex: 1;
+  overflow: auto;
 }
 
 .channels div[data-channel="\\login"] {
-  width: 40%;
-  height: 30%;
-  border: 1px solid rgba(0, 0, 0, .15);
-  border-radius: 3px;
-  align-self: center;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .channels .login-form {
-  height: 100%;
-  width: 90%;
-  margin-left: 5%;
+  height: 30%;
+  width: 40%;
+  border: 1px solid rgba(0, 0, 0, .15);
+  padding: 0 2%;
   display: flex;
   flex-flow: column;
   justify-content: space-evenly;
 }
 
 .channel {
-  width: 100%;
-  height: 100%;
   overflow-x: auto;
   overflow-y: scroll;
+  height: 100%;
   display: flex;
-  flex: 1;
   flex-direction: column-reverse;
 }
 
 .message {
+  line-height: 1.5;
   display: flex;
   border-top: 1px solid rgba(0, 0, 0, .15);
 }
@@ -132,13 +139,11 @@ pre {
 }
 
 .shoutbox-form {
-  width: 100%;
-  height: 2em;
+  height: 2.4em;
 }
 
 .shoutbox-form input[type=text] {
   width: 95%;
-  height: 100%;
   border: 1px solid rgba(0, 0, 0, .15);
   border-left: 0;
   border-right: 0;
@@ -147,7 +152,6 @@ pre {
 
 .shoutbox-form button[type=submit] {
   width: 5%;
-  height: 2.1em;
   border: 1px solid rgba(0, 0, 0, .15);
   border-radius: 0;
 }