Improve game overlay UI

front/src/Components/Menu/MenuIcon.svelte

@@ -14,6 +14,7 @@
     function showMenu() {
         menuVisiblilityStore.set(!get(menuVisiblilityStore));
     }
+
     function showChat() {
         chatVisibilityStore.set(true);
     }
@@ -21,72 +22,94 @@
     function register() {
         window.open(`${ADMIN_URL}/second-step-register`, "_self");
     }
+
     function showInvite() {
         showShareLinkMapModalStore.set(true);
     }
+
+    function noDrag() {
+        return false;
+    }
 </script>
 
 <svelte:window />
 
-<main class="menuIcon">
+<main class="menuIcon noselect">
     {#if $limitMapStore}
         <img
             src={logoInvite}
             alt={$LL.menu.icon.open.invite()}
             class="nes-pointer"
+            draggable="false"
+            on:dragstart|preventDefault={noDrag}
             on:click|preventDefault={showInvite}
         />
         <img
             src={logoRegister}
             alt={$LL.menu.icon.open.register()}
             class="nes-pointer"
+            draggable="false"
+            on:dragstart|preventDefault={noDrag}
             on:click|preventDefault={register}
         />
     {:else}
-        <img src={logoWA} alt={$LL.menu.icon.open.menu()} class="nes-pointer" on:click|preventDefault={showMenu} />
-        <img src={logoTalk} alt={$LL.menu.icon.open.chat()} class="nes-pointer" on:click|preventDefault={showChat} />
+        <img
+            src={logoWA}
+            alt={$LL.menu.icon.open.menu()}
+            class="nes-pointer"
+            draggable="false"
+            on:dragstart|preventDefault={noDrag}
+            on:click|preventDefault={showMenu}
+        />
+        <img
+            src={logoTalk}
+            alt={$LL.menu.icon.open.chat()}
+            class="nes-pointer"
+            draggable="false"
+            on:dragstart|preventDefault={noDrag}
+            on:click|preventDefault={showChat}
+        />
     {/if}
 </main>
 
 <style lang="scss">
+    @import "../../../style/breakpoints.scss";
     .menuIcon {
-        display: inline-grid;
-        z-index: 90;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 20%;
+        z-index: 800;
         position: relative;
-        margin: 25px;
+
         img {
             pointer-events: auto;
             width: 60px;
             padding-top: 0;
-            margin: 3px;
-            image-rendering: pixelated;
+            margin: 5%;
         }
     }
     .menuIcon img:hover {
         transform: scale(1.2);
     }
-    @media only screen and (max-width: 800px), only screen and (max-height: 800px) {
+    @include media-breakpoint-up(sm) {
         .menuIcon {
-            display: inline-grid;
-            z-index: 90;
-            position: relative;
-            margin: 25px;
+            margin-top: 10%;
             img {
                 pointer-events: auto;
                 width: 60px;
                 padding-top: 0;
-                margin: 3px;
             }
         }
         .menuIcon img:hover {
             transform: scale(1.2);
         }
-        @media only screen and (max-width: 800px), only screen and (max-height: 800px) {
-            .menuIcon {
-                margin: 3px;
-                img {
-                    width: 50px;
-                }
+    }
+
+    @include media-breakpoint-up(md) {
+        .menuIcon {
+            img {
+                width: 50px;
             }
         }
     }