redesigns page to fit inside 800x600

src/main/resources/templates/index.html

@@ -364,13 +364,13 @@
         <p>Shows only my Results in this room</p>
     </div>
     <div hidden id="save-dice-hint">
-        <p>This saves your current theme and theme color for <a id="save-dice-hint-name"></a></p>
+        This saves your current theme and theme color for current Name
     </div>
     <div hidden id="command-hint">
-        <p>Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "5d6+10"</p>
+        Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "5d6+10"
     </div>
     <div hidden id="room-hint">
-        <p>How is your character called?</p>
+        How is your character called?
     </div>
 
     <div style="margin-top: 20px; flex-grow: 1" id="how-to">
@@ -435,11 +435,10 @@
             document.getElementById('all-results').hidden = !document.getElementById('gm').checked;
             document.getElementById('all-results-urls').style.display = document.getElementById('gm').checked ? 'fles' : 'none';
             document.getElementById('nameH').innerHTML = '<strong style="font-size:x-large;">' + document.getElementById('name').value + '</strong>';
-            document.getElementById('save-dice-hint-name').innerHTML = '<strong>' + document.getElementById('name').value + '</strong>';
             document.getElementById('roomLabel').hidden = true;
             document.getElementById('nameLabel').hidden = true;
             document.getElementById('nameH').hidden = false;
-            document.getElementById('room-hint').innerHTML = '<p>Room: <strong style="font-size:medium;">' + document.getElementById('room').value + '</strong></p>';
+            document.getElementById('room-hint').innerHTML = 'Room: <strong style="font-size:medium;">' + document.getElementById('room').value + '</strong>';
             document.getElementById('overlayLabel').innerHTML = 'Dice-Overlay for <strong>' + document.getElementById('name').value + '</strong>';
             document.title = document.getElementById('name').value + ' - Dice-Tower';
 
@@ -545,7 +544,7 @@
         popover.forEach((e) => {
             const target = document.querySelector("#" + e.getAttribute("popovertarget"));
             e.addEventListener("mouseover", () => {
-                showSnackbar(target.innerHTML);
+                showSnackbar(target.innerHTML, true);
             });
 
             e.addEventListener("mouseout", () => {
@@ -578,12 +577,17 @@
         showSnackbar("<i class='fa-regular fa-copy'></i> Link copied to clipboard: <br/>" + copyText.value);
     }
 
-    function showSnackbar(message) {
+    function showSnackbar(message, keepOpen = false) {
         let snackbar = document.getElementById("snackbar");
         let snackbarContainer = document.getElementById("snackbar-container");
         snackbar.innerHTML = message;
         snackbar.className = "show";
         snackbarContainer.className = "show";
+        if (!keepOpen) {
+            setTimeout(function () {
+                hideSnackbar();
+            }, 5000);
+        }
     }
 
     function hideSnackbar() {