Added flex

web/src/components/UserTitle.vue

@@ -1,7 +1,11 @@
 <template>
-  <div v-if="user">
+  <v-container v-if="user">
+    <v-row>
+      <v-col cols="auto" align-self="center">
         <Avatar :src="user.thumbnailPhoto" size="56" left />
-    <div>
+      </v-col>
+
+      <v-col>
         {{ user.displayName }}
         <DistinguishedNameBreadcrumb :dn="user.dn" />
         <RoleBadge
@@ -10,8 +14,9 @@
           class="mr-1"
           :role="role"
         />
-    </div>
-  </div>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>

web/src/components/ui/RoleBadge.vue

@@ -1,7 +1,7 @@
 <template>
   <v-chip label :color="color + ' darken-4'" small dark outlined>
-    {{ text }}</v-chip
-  >
+    {{ text }}
+  </v-chip>
 </template>
 
 <script>