Made chat + menu btns responsive

src/components/gui/Chat.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full min-w-[750px] flex flex-col">
+  <div class="w-full md:min-w-[350px] max-w-[750px] flex flex-col">
     <div ref="chatWindow" class="w-full overflow-auto h-32 mb-5 bg-gray-300/80 rounded-lg border-2 border-solid border-cyan-200" v-show="gameStore.isChatOpen">
       <div v-for="message in chats" class="flex-col py-2 items-center p-3">
         <span class="text-ellipsis overflow-hidden whitespace-nowrap text-sdm">{{ message.character.name }}</span>

src/components/gui/Menu.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul class="list-none flex gap-2.5 items-center m-0">
+  <ul class="list-none flex gap-2.5 items-center m-0 max-md:pl-0">
     <li class="menu-item group relative" @click="gameStore.toggleChat">
       <div class="group-hover:block absolute bottom-16 left-1/2 -translate-x-1/2 w-20 h-6 text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
         <p class="absolute w-full bottom-0 m-0 text-xs leading-6">Chat</p>

src/screens/Game.vue

@@ -13,11 +13,11 @@
             </div>
           </div>
           <World v-if="isLoaded" :key="gameStore.character?.zoneId" />
-          <div class="fixed inset-x-0 bottom-0 flex justify-between items-end p-10 pointer-events-none">
-            <div class="pointer-events-auto">
+          <div class="fixed inset-x-0 bottom-0 flex justify-between gap-5 items-end py-10 px-5 xxs:p-10 pointer-events-none max-md:flex-wrap max-md:flex-col-reverse">
+            <div class="pointer-events-auto w-full">
               <Chat />
             </div>
-            <div class="pointer-events-auto">
+            <div class="pointer-events-auto max-xs:m-auto mr-auto">
               <Menubar />
             </div>
           </div>

tailwind.config.js

@@ -10,6 +10,12 @@ export default {
       '30px': '30px'
     },
     screens: {
+      'xxs': '350px',
+      // => @media (min-width: 350px) { ... }
+
+      'xs': '480px',
+      // => @media (min-width: 480px) { ... }
+
       'sm': '640px',
       // => @media (min-width: 640px) { ... }