src/components/NavBar.vue

@@ -77,7 +77,14 @@ onMounted(() => stateStore.setMounted());
                     </QTooltip>
                     <PinnedModules />
                 </QBtn>
-                <QBtn class="user-button" rounded dense flat no-wrap id="user">
+                <QBtn
+                    class="{quasar.platform.is.mobile: 'q-pa-sm q-ml-xs'}"
+                    rounded
+                    dense
+                    flat
+                    no-wrap
+                    id="user"
+                >
                     <QAvatar size="lg">
                         <QImg
                             :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
@@ -97,22 +104,10 @@ onMounted(() => stateStore.setMounted());
 </template>
 
 <style lang="scss" scoped>
-.user-button {
-    display: flex;
-    align-items: center;
-    padding: 8px; /* Ajusta el valor de padding según tus necesidades */
-
-    /* Estilos específicos para dispositivos móviles */
-    @media (max-width: 768px) {
-        padding: 2px; /* Reduce el padding en dispositivos móviles */
-        margin-left: 1px;
-    }
-}
-
 .pinnedModules {
     @media (max-width: 768px) {
-        padding: 2px; /* Reduce el padding en dispositivos móviles */
-        margin-left: 1px;
+        padding: 0px;
+        margin-left: 0px;
     }
 }
 </style>

src/components/ui/VnSearchbar.vue

@@ -2,6 +2,8 @@
 import { onMounted, ref } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useArrayData } from 'composables/useArrayData';
+import { useQuasar } from 'quasar';
+const quasar = useQuasar();
 
 const props = defineProps({
     dataKey: {
@@ -93,7 +95,7 @@ async function search() {
             autofocus
         >
             <template #prepend>
-                <QIcon name="search" />
+                <QIcon name="search" v-if="!quasar.platform.is.mobile" />
             </template>
             <template #append>
                 <QIcon