From 4d326f24ac909617163d8b998018c2e548bb7d1f Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Wed, 21 Aug 2024 22:18:20 +0200
Subject: [PATCH] Made chat + menu btns responsive

---
 src/components/gui/Chat.vue | 2 +-
 src/components/gui/Menu.vue | 2 +-
 src/screens/Game.vue        | 6 +++---
 tailwind.config.js          | 6 ++++++
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/gui/Chat.vue b/src/components/gui/Chat.vue
index a7d45a1..3116b91 100644
--- a/src/components/gui/Chat.vue
+++ b/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>
diff --git a/src/components/gui/Menu.vue b/src/components/gui/Menu.vue
index f946fe2..7306fd5 100644
--- a/src/components/gui/Menu.vue
+++ b/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>
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index 744b9d6..3cc34dc 100644
--- a/src/screens/Game.vue
+++ b/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>
diff --git a/tailwind.config.js b/tailwind.config.js
index 813b7fd..cfa7345 100644
--- a/tailwind.config.js
+++ b/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) { ... }