Fix viewer menu styling

Closes #260

app/Resources/Viewer/index.html

@@ -25,6 +25,8 @@
     <div id="menu">
       <button id="btn-settings">Settings</button>
       
+      <div class="splitter"></div>
+      
       <div> <!-- needed to stop the select from messing up -->
         <select id="opt-messages-per-page">
           <option value="50">50 messages per page&nbsp;</option>

app/Resources/Viewer/scripts/bootstrap.mjs

@@ -1,6 +1,7 @@
 import discord from "./discord.mjs";
 import gui from "./gui.mjs";
 import state from "./state.mjs";
+import "./polyfills.mjs";
 
 window.DISCORD = discord;
 

app/Resources/Viewer/scripts/polyfills.mjs

@@ -0,0 +1,35 @@
+// https://gist.github.com/MattiasBuelens/496fc1d37adb50a733edd43853f2f60e/088f061ab79b296f29225467ae9ba86ff990195d
+
+ReadableStream.prototype.values ??= function({ preventCancel = false } = {}) {
+	const reader = this.getReader();
+	return {
+		async next() {
+			try {
+				const result = await reader.read();
+				if (result.done) {
+					reader.releaseLock();
+				}
+				return result;
+			} catch (e) {
+				reader.releaseLock();
+				throw e;
+			}
+		},
+		async return(value) {
+			if (!preventCancel) {
+				const cancelPromise = reader.cancel(value);
+				reader.releaseLock();
+				await cancelPromise;
+			}
+			else {
+				reader.releaseLock();
+			}
+			return { done: true, value };
+		},
+		[Symbol.asyncIterator]() {
+			return this;
+		}
+	};
+};
+
+ReadableStream.prototype[Symbol.asyncIterator] ??= ReadableStream.prototype.values;

app/Resources/Viewer/styles/menu.css

@@ -1,15 +1,16 @@
 #menu {
-  width: 100%;
-  height: 48px;
   display: flex;
   flex-direction: row;
+  align-items: stretch;
+  gap: 8px;
+  padding: 8px;
   background-color: #17181c;
   border-bottom: 1px dotted #5d626b;
 }
 
 #menu .splitter {
-  width: 1px;
+  flex: 0 0 1px;
-  margin: 9px 4px;
+  margin: 9px 1px;
   background-color: #5d626b;
 }
 
@@ -23,7 +24,8 @@
 }
 
 #menu button, #menu select, #menu input[type="text"] {
-  margin: 8px;
+  height: 31px;
+  padding: 0 10px;
   background-color: #7289da;
   color: #fff;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
@@ -31,28 +33,25 @@
 
 #menu button {
   font-size: 17px;
-  padding: 0 12px;
   border: 0;
   cursor: pointer;
+  white-space: nowrap;
 }
 
 #menu select {
   font-size: 14px;
-  padding: 6px;
   border: 0;
   cursor: pointer;
 }
 
 #menu input[type="text"] {
   font-size: 14px;
-  padding: 7px 12px;
   border: 0;
 }
 
 #menu .nav {
   display: flex;
   flex-direction: row;
-  margin: 0 8px;
 }
 
 #menu .nav > button {
@@ -66,7 +65,7 @@
 }
 
 #menu .nav > button, #menu .nav > p {
-  margin: 8px 1px;
+  margin: 0 1px;
 }
 
 #opt-filter-list > select, #opt-filter-list > input {
@@ -76,3 +75,7 @@
 #opt-filter-list > .active {
   display: block;
 }
+
+#btn-about {
+  margin-left: auto;
+}