fix(responsive): hide account name on small screens

Author: dvcol

src/components/common/navbar/NavbarComponent.vue

@@ -239,6 +239,7 @@ const onTouchEnd = (e: TouchEvent) => {
           v-if="navElement"
           :parent-element="navElement"
           :routes="overflowRoutes"
+          :compact="isCompact"
         />
       </NTab>
     </NTabs>

src/components/common/navbar/NavbarSettingsDopdown.vue

@@ -57,6 +57,11 @@ const { routes } = defineProps({
     required: false,
     default: () => [],
   },
+  compact: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
 const users = computed(() => {
@@ -171,6 +176,7 @@ const placement = computed(() => {
   >
     <NFlex justify="space-around" align="center" :wrap="false">
       <NEllipsis
+        v-if="!compact"
         style="max-width: calc(100vw / 6 - 0.25rem - 3px - 1.75rem); margin-left: 0.25rem"
         :tooltip="{
           to: parentElement,

src/components/views/search/SearchNavbar.vue

@@ -350,7 +350,7 @@ onActivated(() => {
   margin-top: 12px;
 }
 
-@media (width < 400px) {
+@media (width < 500px) {
   .n-auto-complete.search-input .n-input-wrapper .n-base-loading.n-base-suffix {
     display: none;
     background-color: red;

src/stores/app-state.store.ts

@@ -40,9 +40,9 @@ export const useAppStateStore = defineStore('app.state', () => {
 
   const { bottom, minimum, floating } = watchBreakpoint(
     appRef,
-    { bottom: 400, minimum: 800, floating: 1000 },
+    { bottom: 500, minimum: 800, floating: 1000 },
     {
-      bottom: { width: window.innerWidth < 400 },
+      bottom: { width: window.innerWidth < 500 },
       minimum: { width: window.innerWidth < 800 },
       floating: { width: window.innerWidth < 1000 },
     },