Ensure the SizeIndicator helper is visible on all pages

src/App.vue

@@ -25,6 +25,9 @@
       </div>
     </div>
   </v-app>
+  
+  <size-indicator></size-indicator>
+  
 </template>
 
 <script async setup>
@@ -33,6 +36,7 @@ import Footer from "@/views/main/Footer.vue";
 import SideBar from "@/views/main/SideBar.vue";
 import {ref, onMounted, onUnmounted} from 'vue';
 import {useSideBarStore} from "@/stores/sideBarStore.js";
+import SizeIndicator from "@/views/tools/SizeIndicator.vue";
 
 const showPopup = ref(false);
 const popup = ref(null);

src/views/creators/CreatorBanner.vue

@@ -1,5 +1,4 @@
 <template>
-  <size-indicator></size-indicator>
   
   <!--  Bannière-->
   <div class="relative bottom-4  z-20 m">
@@ -79,7 +78,6 @@
 </template>
 
 <script setup>
-import SizeIndicator from "@/views/tools/SizeIndicator.vue";
 import AboutYou from "@/views/creators/CreatorDescriptionBtn.vue";
 import SubscribeButton from "@/views/creators/SubscribeButton.vue";
 import PublishContentButton from "@/views/contents/PublishContentButton.vue";

src/views/main/Profile.vue

@@ -64,13 +64,11 @@
     </div>
   </div>
   
-  <SizeIndicator></SizeIndicator>
 </template>
 
 <script setup>
 import {ref, onMounted} from "vue";
 import {useUserStore} from "@/stores/userStore.js";
-import SizeIndicator from "@/views/tools/SizeIndicator.vue";
 import ManageAccount from "@/views/Profile/ManageAccount.vue";
 import PageInformations from "@/views/Profile/PageInformations.vue";
 import PersonnalInfo from "@/views/Profile/PersonnalInfo.vue";

src/views/tools/SizeIndicator.vue

@@ -1,16 +1,25 @@
 <template>
-  <div class="fixed bottom-0 left-0 m-4 z-50">
-    <div class="hidden sm:block md:hidden bg-blue-500 text-white p-2 rounded">
+  
+  <div class="size-code sm:block md:hidden bg-blue-500 text-white">
     sm
   </div>
-    <div class="hidden md:block lg:hidden bg-green-500 text-white p-2 rounded">
+
+  <div class="size-code md:block lg:hidden bg-green-500 text-white">
     md
   </div>
-    <div class="hidden lg:block xl:hidden bg-yellow-500 text-black p-2 rounded">
+
+  <div class="size-code lg:block xl:hidden bg-yellow-500 text-black">
     lg
   </div>
-    <div class="hidden xl:block bg-red-500 text-white p-2 rounded">
+
+  <div class="size-code xl:block bg-red-500 text-white">
     xl
   </div>
-  </div>
+  
 </template>
+
+<style scoped>
+.size-code {
+  @apply fixed bottom-0 left-0 z-50 rounded p-2 m-2 w-9 h-9 text-center content-center capitalize font-mono font-semibold
+}
+</style>