From 9489d9e6a98d65512762b4ebb984a03cb99ae000 Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Wed, 8 Jun 2022 20:17:23 +0000
Subject: [PATCH] Added flex

---
 web/src/components/UserTitle.vue    | 31 +++++++++++++++++------------
 web/src/components/ui/RoleBadge.vue |  4 ++--
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/web/src/components/UserTitle.vue b/web/src/components/UserTitle.vue
index 06b4cb1..8d4e722 100644
--- a/web/src/components/UserTitle.vue
+++ b/web/src/components/UserTitle.vue
@@ -1,17 +1,22 @@
 <template>
-  <div v-if="user">
-    <Avatar :src="user.thumbnailPhoto" size="56" left />
-    <div>
-      {{ user.displayName }}
-      <DistinguishedNameBreadcrumb :dn="user.dn" />
-      <RoleBadge
-        v-for="role in user.roles"
-        :key="role"
-        class="mr-1"
-        :role="role"
-      />
-    </div>
-  </div>
+  <v-container v-if="user">
+    <v-row>
+      <v-col cols="auto" align-self="center">
+        <Avatar :src="user.thumbnailPhoto" size="56" left />
+      </v-col>
+
+      <v-col>
+        {{ user.displayName }}
+        <DistinguishedNameBreadcrumb :dn="user.dn" />
+        <RoleBadge
+          v-for="role in user.roles"
+          :key="role"
+          class="mr-1"
+          :role="role"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
diff --git a/web/src/components/ui/RoleBadge.vue b/web/src/components/ui/RoleBadge.vue
index dea1ece..379df0a 100644
--- a/web/src/components/ui/RoleBadge.vue
+++ b/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>