refactor: 💡 update how project & target are displayed in table (#242)

* refactor: 💡 update how project & target are displayed in table

✅ Closes: ICU-9165

* refactor: 💡 update gap to use rem

* refactor: 💡 update with PR feedback

* refactor: 💡 use flex-direction column instead of display block

ui/admin/app/styles/app.scss

@@ -901,7 +901,7 @@
 // Session recording - List
 .session-recording-list-cell-item {
   display: flex;
-  gap: sizing.rems(xs);
+  gap: 0.5rem;
 
   span {
     display: flex;
@@ -909,6 +909,14 @@
   }
 }
 
+.session-recording-list-cell-item.target-column {
+  flex-direction: column;
+
+  span {
+    gap: 0.5rem;
+  }
+}
+
 // Channels by Connection
 .channels-by-connection {
   &-connection-header {

ui/admin/app/templates/scopes/scope/session-recordings/index.hbs

@@ -42,13 +42,18 @@
             {{! Target }}
             <B.Td>
               <div
-                class='session-recording-list-cell-item hds-font-weight-semibold'
+                class='session-recording-list-cell-item target-column hds-font-weight-semibold'
               >
-                <span><FlightIcon @name='grid' /></span>
+                <span>
-                <span>{{B.data.targetScopeDisplayName}}</span>
+                  <FlightIcon @name='target' />
-                <span class='hds-foreground-faint'>/</span>
+                  {{B.data.target.name}}
-                <span><FlightIcon @name='target' /></span>
+                </span>
-                <span>{{B.data.target.name}}</span>
+                <span>
+                  <Hds::Badge
+                    @text={{B.data.targetScopeDisplayName}}
+                    @icon='grid'
+                  />
+                </span>
               </div>
             </B.Td>
             {{! Duration }}

ui/admin/tests/acceptance/session-recordings/read-test.js

@@ -39,8 +39,12 @@ module('Acceptance | session recordings | read', function (hooks) {
       type: 'org',
       scope: { id: 'global', type: 'global' },
     });
+    instances.target = this.server.create('target', {
+      scope: instances.scopes.global,
+    });
     instances.sessionRecording = this.server.create('session-recording', {
       scope: instances.scopes.global,
+      target: instances.target.attrs,
     });
     instances.connectionRecording = this.server.create('connection-recording', {
       session_recording: instances.sessionRecording,