app/Resources/Viewer/index.html

@@ -25,8 +25,6 @@
     <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,7 +1,6 @@
 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

@@ -1,35 +0,0 @@
-// 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,16 +1,15 @@
 #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 {
-  flex: 0 0 1px;
-  margin: 9px 1px;
+  width: 1px;
+  margin: 9px 4px;
   background-color: #5d626b;
 }
 
@@ -24,8 +23,7 @@
 }
 
 #menu button, #menu select, #menu input[type="text"] {
-  height: 31px;
-  padding: 0 10px;
+  margin: 8px;
   background-color: #7289da;
   color: #fff;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
@@ -33,25 +31,28 @@
 
 #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 {
@@ -65,7 +66,7 @@
 }
 
 #menu .nav > button, #menu .nav > p {
-  margin: 0 1px;
+  margin: 8px 1px;
 }
 
 #opt-filter-list > select, #opt-filter-list > input {
@@ -75,7 +76,3 @@
 #opt-filter-list > .active {
   display: block;
 }
-
-#btn-about {
-  margin-left: auto;
-}