chore: 🤖 tweak whitespace and formatting

addons/api/mirage/generated/factories/user.js

@@ -1,5 +1,5 @@
 import { Factory } from 'ember-cli-mirage';
-import { random, date, datatype } from 'faker';
+import { random, date, datatype, internet } from 'faker';
 
 /**
  * GeneratedUserModelFactory
@@ -11,4 +11,5 @@ export default Factory.extend({
   created_time: () => date.recent(),
   updated_time: () => date.recent(),
   disabled: () => datatype.boolean(),
+  email: () => internet.email().toLowerCase(),
 });

addons/rose/addon/styles/rose/components/table/_table.scss

@@ -31,7 +31,7 @@
 
   .rose-table-cell,
   .rose-table-header-cell {
-    vertical-align: middle;
+    vertical-align: text-top;
 
     &.align-right {
       text-align: right;

ui/admin/app/components/form/group/add-members/index.hbs

@@ -30,7 +30,15 @@
                 onChange={{fn this.toggleMember user}}
               />
               {{#if user.accountName}}
-                <br /><Rose::Badge>{{user.accountName}}</Rose::Badge>
+                {{!
+                  The following is a formatting hack since we don't have a great
+                  way to manage micro-whitespace or alignment among separate
+                  components without resorting to heavy-handed grids
+                  or contextualization.  This is a one-off.
+                }}
+                <br />
+                &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
+                <Rose::Badge>{{user.accountName}}</Rose::Badge>
               {{/if}}
             </row.headerCell>
             <row.cell><code>{{user.id}}</code></row.cell>

ui/admin/app/components/form/role/add-principals/index.hbs

@@ -31,7 +31,15 @@
                 onChange={{fn this.togglePrincipal principal}}
               />
               {{#if principal.accountName}}
-                <br /><Rose::Badge>{{principal.accountName}}</Rose::Badge>
+                {{!
+                  The following is a formatting hack since we don't have a great
+                  way to manage micro-whitespace or alignment among separate
+                  components without resorting to heavy-handed grids
+                  or contextualization.  This is a one-off.
+                }}
+                <br />
+                &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
+                <Rose::Badge>{{principal.accountName}}</Rose::Badge>
               {{/if}}
             </row.headerCell>
             <row.cell>{{principal.id}}</row.cell>

ui/admin/app/templates/scopes/scope/sessions/index.hbs

@@ -47,7 +47,13 @@
                   <code>{{sessionAggregate.session.id}}</code>
                 </Copyable>
               </row.headerCell>
-              <row.cell>{{sessionAggregate.user.displayName}}</row.cell>
+              <row.cell>
+                <code>{{sessionAggregate.user.id}}</code>
+                {{#if sessionAggregate.user.accountName}}
+                  <br /><Rose::Badge
+                  >{{sessionAggregate.user.accountName}}</Rose::Badge>
+                {{/if}}
+              </row.cell>
               <row.cell>{{sessionAggregate.target.displayName}}</row.cell>
               <row.cell>
                 <time