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/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>{{B.data.targetScopeDisplayName}}</span>
-                <span class='hds-foreground-faint'>/</span>
-                <span><FlightIcon @name='target' /></span>
-                <span>{{B.data.target.name}}</span>
+                <span>
+                  <FlightIcon @name='target' />
+                  {{B.data.target.name}}
+                </span>
+                <span>
+                  <Hds::Badge
+                    @text={{B.data.targetScopeDisplayName}}
+                    @icon='grid'
+                  />
+                </span>
               </div>
             </B.Td>
             {{! Duration }}