Third pass on css and reportMenu

front/src/Components/Menu/AboutRoomSubMenu.svelte

@@ -127,7 +127,7 @@
       }
   }
 
-  @media only screen and (max-height: 900px) {
+  @media only screen and (max-width: 800px), only screen and (max-height: 800px) {
     div.about-room-main {
       section.share-url.not-mobile {
         display: none;

front/src/Components/Menu/GlobalMessagesSubMenu.svelte

@@ -103,7 +103,7 @@
       }
     }
 
-    @media only screen and (max-height: 900px) {
+    @media only screen and (max-width: 800px), only screen and (max-height: 800px) {
       .global-message-content {
         height: calc(100% - 5px);
       }

front/src/Components/Menu/Menu.svelte

@@ -90,13 +90,13 @@
   }
 
   div.menu-container-main {
-    --size-first-columns-grid: clamp(120px, 15%, 200px);
+    --size-first-columns-grid: 200px;
 
     font-family: "Press Start 2P";
     pointer-events: auto;
-    height: 80vh;
+    height: 70vh;
     width: 75vw;
-    top: clamp(55px, 10vh, 10vh);
+    top: 10vh;
 
     position: relative;
     margin: auto;
@@ -126,9 +126,11 @@
     }
   }
 
-  @media only screen and (max-height: 900px) {
+  @media only screen and (max-width: 800px) {
     div.menu-container-main {
-      bottom: 55px;
+      --size-first-columns-grid: 120px;
+      //height: calc(100vh - 110px);
+      top: 55px;
       width: 100vw;
       font-size: 0.5em;
     }

front/src/Components/Menu/MenuIcon.svelte

@@ -28,7 +28,7 @@
       padding-top: 0;
     }
   }
-  @media only screen and (max-height: 900px) {
+  @media only screen and (max-width: 800px), only screen and (max-height: 800px) {
     .menuIcon {
       margin: 3px;
       img {

front/src/Components/Menu/ProfileSubMenu.svelte

@@ -70,7 +70,7 @@
       }
     }
 
-    @media only screen and (max-height: 900px) {
+    @media only screen and (max-width: 800px) {
       div.customize-main section button {
         width: 130px;
       }

front/src/Components/Menu/SettingsSubMenu.svelte

@@ -125,7 +125,7 @@ function changeNotification() {
     }
   }
 
-  @media only screen and (max-height: 900px) {
+  @media only screen and (max-width: 800px), only screen and (max-height: 800px) {
     div.settings-main {
       section {
         padding: 0;

front/src/Components/ReportMenu/ReportMenu.svelte

@@ -5,12 +5,12 @@
     import {onDestroy, onMount} from "svelte";
     import type {Unsubscriber} from "svelte/store";
     import {playersStore} from "../../Stores/PlayersStore";
-    import {connectionManager} from "../../Connexion/ConnectionManager";
+    //import {connectionManager} from "../../Connexion/ConnectionManager";
-    import {GameConnexionTypes} from "../../Url/UrlManager";
+    //import {GameConnexionTypes} from "../../Url/UrlManager";
 
     let blockActive =  true;
     let reportActive = !blockActive;
-    let anonymous: boolean;
+    let anonymous: boolean = false;
     let userUUID: string | undefined = '';
     let userName = "No name";
     let unsubscriber: Unsubscriber
@@ -25,7 +25,7 @@
                 }
             }
         })
-        anonymous = connectionManager.getConnexionType === GameConnexionTypes.anonymous;
+        //anonymous = connectionManager.getConnexionType === GameConnexionTypes.anonymous;
     })
 
     onDestroy(() => {
@@ -48,8 +48,15 @@
         reportActive = true;
     }
 
+    function onKeyDown(e:KeyboardEvent) {
+        if (e.key === 'Escape') {
+            close();
+        }
+    }
 </script>
 
+<svelte:window on:keydown={onKeyDown}/>
+
 <div class="report-menu-main nes-container is-rounded">
     <section class="report-menu-title">
         <h2>Moderate {userName}</h2>
@@ -96,7 +103,7 @@
     position: relative;
     height: 70vh;
     width: 50vw;
-    top: clamp(55px, 10vh, 10vh);
+    top: 10vh;
     margin: auto;
 
     section.report-menu-title {
@@ -122,9 +129,10 @@
     }
   }
 
-  @media only screen and (max-height: 900px) {
+  @media only screen and (max-width: 800px) {
     div.report-menu-main {
-      bottom: 55px;
+      top: 21vh;
+      height: 60vh;
       width: 100vw;
       font-size: 0.5em;
     }

front/src/Components/ReportMenu/ReportSubMenu.svelte

@@ -42,7 +42,13 @@
       text-align: center;
 
       textarea {
-        height: clamp(100px, 20vh, 20vh);
+        height: clamp(100px, 15vh, 300px);
+      }
+    }
+
+    @media only screen and (max-height: 630px) {
+      div.report-container-main textarea {
+        height: 50px;
       }
     }
 </style>

front/style/TextGlobalMessageSvelte-Style.scss

@@ -30,7 +30,7 @@ section.section-input-send-text {
   }
 }
 
-@media only screen and (max-height: 900px) {
+@media only screen and (max-width: 800px), only screen and (max-height: 800px) {
   section.section-input-send-text {
     --height-toolbar: 30%;