Added breakpoints

web/src/components/UserChip.vue

@@ -0,0 +1,21 @@
+<template>
+  <v-chip color="primary">
+    <v-avatar
+      v-if="appStore.me?.thumbnailPhoto"
+      :image="appStore.me?.thumbnailPhoto"
+      :start="smAndUp"
+    />
+    <span v-if="smAndUp">
+      {{ appStore.me?.displayName }}
+    </span>
+  </v-chip>
+</template>
+
+<script lang="ts" setup>
+import { useAppStore } from '@/store/appStore'
+import { useDisplay } from 'vuetify'
+
+const { smAndUp } = useDisplay()
+
+const appStore = useAppStore()
+</script>

web/src/layouts/default/View.vue

@@ -22,6 +22,7 @@
         rounded
       />
       <v-text-field
+        v-if="smAndUp"
         class="ml-2"
         density="compact"
         style="max-width: 200px"
@@ -43,14 +44,7 @@
       />
       <v-spacer />
 
-      <v-chip color="primary">
-        <v-avatar
-          v-if="appStore.me?.thumbnailPhoto"
-          :image="appStore.me?.thumbnailPhoto"
-          start
-        />
-        {{ appStore.me?.displayName }}
-      </v-chip>
+      <user-chip />
       <v-btn class="mx-2" @click="logout" icon size="small">
         <v-icon icon="mdi-logout"></v-icon>
       </v-btn>
@@ -63,7 +57,9 @@
 </template>
 
 <script lang="ts" setup>
+import UserChip from '@/components/UserChip.vue'
 import { useAppStore } from '@/store/appStore'
+import { useDisplay } from 'vuetify'
 
 import { removeJwtToken } from '@/auth'
 
@@ -73,6 +69,8 @@ const appStore = useAppStore()
 
 const router = useRouter()
 
+const { smAndUp } = useDisplay()
+
 const campiSelectItems = [
   {
     title: 'Todos',

web/src/layouts/single/View.vue

@@ -17,14 +17,8 @@
       />
       <v-spacer />
 
-      <v-chip color="primary">
-        <v-avatar
-          v-if="appStore.me?.thumbnailPhoto"
-          :image="appStore.me?.thumbnailPhoto"
-          start
-        />
-        {{ appStore.me?.displayName }}
-      </v-chip>
+      <user-chip />
+
       <v-btn class="mx-2" @click="logout" icon size="small">
         <v-icon icon="mdi-logout"></v-icon>
       </v-btn>
@@ -37,6 +31,8 @@
 </template>
 
 <script lang="ts" setup>
+import UserChip from '@/components/UserChip.vue'
+
 import { useAppStore } from '@/store/appStore'
 import { removeJwtToken } from '@/auth'