refs #6082 navBar fix mobile

src/components/NavBar.vue

@@ -62,7 +62,7 @@ const pinnedModulesRef = ref();
                 <QBadge label="Beta" align="top" />
             </QToolbarTitle>
             <QSpace />
-            <div id="searchbar"></div>
+            <div id="searchbar" class="searchbar"></div>
             <QSpace />
             <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
                 <div id="actions-prepend"></div>
@@ -77,7 +77,7 @@ const pinnedModulesRef = ref();
                     </QTooltip>
                 </QBtn>
                 <QBtn
-                    class="{quasar.platform.is.mobile: 'q-pa-none q-ml-none'}"
+                    :class="{ 'q-pa-none': quasar.platform.is.mobile }"
                     id="pinnedModules"
                     icon="apps"
                     flat
@@ -90,7 +90,7 @@ const pinnedModulesRef = ref();
                     <PinnedModules ref="pinnedModulesRef" />
                 </QBtn>
                 <QBtn
-                    class="{quasar.platform.is.mobile: 'q-pa-none q-ml-none'}"
+                    :class="{ 'q-pa-none': quasar.platform.is.mobile }"
                     rounded
                     dense
                     flat
@@ -115,14 +115,11 @@ const pinnedModulesRef = ref();
     </QHeader>
 </template>
 
-<!-- <style lang="scss" scoped>
-.pinnedModules {
-    @media (max-width: 768px) {
-        padding: 0px;
-        margin-left: 0px;
-    }
+<style lang="scss" scoped>
+.searchbar {
+    width: max-content;
 }
-</style> -->
+</style>
 <i18n>
 en:
     Go to Salix: Go to Salix

src/components/PinnedModules.vue

@@ -35,19 +35,13 @@ async function redirect() {
 <template>
     <QMenu anchor="bottom left" max-width="300px" max-height="400px">
         <div v-if="pinnedModules.length >= 0" class="row justify-around q-pa-md">
-            <QBtn
-                flat
-                stack
-                size="lg"
-                icon="more_up"
-                class="col-5"
-                @click="redirect($route.params.id)"
-            >
-                <div class="text-center button-text">Salix</div>
+            <QBtn flat stack size="lg" icon="more_up" @click="redirect($route.params.id)">
+                <div class="button-text">Salix</div>
             </QBtn>
-            <QBtn flat stack size="lg" icon="home" class="col-5" to="/">
-                <div class="text-center button-text">{{ t('Home') }}</div>
+            <QBtn flat stack size="lg" icon="home" to="/">
+                <div class="button-text">{{ t('Home') }}</div>
             </QBtn>
+
             <div class="row col-12 justify-around q-mt-md">
                 <QBtn
                     flat

src/components/ui/VnSearchbar.vue

@@ -114,13 +114,9 @@ async function search() {
 </template>
 
 <style lang="scss" scoped>
-.q-field {
-    width: 250px;
-}
-
 @media screen and (min-width: $breakpoint-sm-max) {
     .q-field {
-        width: 400px;
+        width: 450px;
     }
 }