redesigns page to fit inside 800x600

pom.xml

@@ -4,7 +4,7 @@
     <modelVersion>4.0.0</modelVersion>
     <groupId>de.arindy</groupId>
     <artifactId>dice-tower</artifactId>
-    <version>1.0.6-SNAPSHOT</version>
+    <version>1.0.5-SNAPSHOT</version>
 
     <properties>
         <compiler-plugin.version>3.13.0</compiler-plugin.version>

src/main/resources/templates/index.html

@@ -304,7 +304,7 @@
     </div>
     <div id="results" hidden class="w3-panel w3-theme-l6 w3-card w3-display-container"
          style="padding: 25px; flex-grow: 1; margin-bottom: auto">
-        <iframe id="resultFrame" title="results" style="width: 100%; height: 100%; overflow: hidden; border: 0"
+        <iframe id="resultFrame" title="results" style="width: 100%; height: 85%; overflow: hidden; border: 0"
                 onload="this.height=this.contentWindow.document.body.scrollHeight;"></iframe>
     </div>
 
@@ -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() {