From 5e8b8e0a93f3f69b2ee4fa63dd646f9e4db1b72d Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Fri, 30 Aug 2024 09:57:57 -0400
Subject: [PATCH] Fixe header

---
 src/views/main/Header.vue | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/views/main/Header.vue b/src/views/main/Header.vue
index b575379..b7c406e 100644
--- a/src/views/main/Header.vue
+++ b/src/views/main/Header.vue
@@ -79,8 +79,7 @@
 
       <v-btn
           variant="text"
-          class="p-0 mx-0 min-w-0"
-          style="min-width: 24px;"
+          class="p-0 mx-0 min-w-0"          
           @click="toggleLanguage"
       >
         {{ selectedLanguage === 'fr' ? 'Fr' : 'En' }}
@@ -90,7 +89,7 @@
         <v-menu open-on-hover>
           <template v-slot:activator="{ props }">
             <div v-bind="props" class="flex align-center font-sans py-1 px-2 rounded-lg hover:bg-gray-100">
-              <span class="max-w-xs hidden md:block">
+              <span class="max-w-xs hidden md:block capitalize">
                 {{ userStore.alias }}
               </span>
               <img
@@ -232,12 +231,22 @@ function toggleLanguage() {
 .nav-button:hover {
   @apply bg-[#903175] text-gray-200;
 }
+
+/* Explorer & feed others */
 .absolute-center {
   position: absolute;
-  left: 50%;
+  left: 50%; 
   transform: translateX(-50%);
   display: flex;
   gap: 6px;
   align-items: center;
 }
+
+/* Explorer & feed center mobile */
+@media (max-width: 640px) { 
+  .absolute-center {
+    left: 65%; 
+    transform: translateX(-55%);
+  }
+}
 </style>