Added flex

web/src/components/UserTitle.vue

@@ -1,17 +1,22 @@
 <template>
-  <div v-if="user">
+  <v-container v-if="user">
-    <Avatar :src="user.thumbnailPhoto" size="56" left />
+    <v-row>
-    <div>
+      <v-col cols="auto" align-self="center">
-      {{ user.displayName }}
+        <Avatar :src="user.thumbnailPhoto" size="56" left />
-      <DistinguishedNameBreadcrumb :dn="user.dn" />
+      </v-col>
-      <RoleBadge
+
-        v-for="role in user.roles"
+      <v-col>
-        :key="role"
+        {{ user.displayName }}
-        class="mr-1"
+        <DistinguishedNameBreadcrumb :dn="user.dn" />
-        :role="role"
+        <RoleBadge
-      />
+          v-for="role in user.roles"
-    </div>
+          :key="role"
-  </div>
+          class="mr-1"
+          :role="role"
+        />
+      </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>