chore: tweak card styles

ui/desktop/app/styles/app.scss

@@ -373,30 +373,26 @@
     border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
     display: flex;
     justify-content: flex-start;
-    padding: sizing.rems(s);
+    padding: sizing.rems(s) sizing.rems(m);
 
     h2 {
       @include type.type(s, normal);
       color: var(--ui-gray-starker-1);
+      margin: 0;
+      padding: sizing.rems(xxs) + sizing.rems(xxxs) 0;
     }
 
-    div,
-    h2 {
-      display: flex;
-      flex-shrink: 1;
-      width: 100%;
+    .rose-icon {
+      margin-right: sizing.rems(xxxs);
     }
   }
 
   .card-body {
-    display: flex;
-    flex-direction: column;
     padding: sizing.rems(s);
   }
 
   .card-footer {
     border-top: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
-    display: flex;
     padding: sizing.rems(s);
   }
 }

ui/desktop/app/templates/scopes/scope/projects/targets.hbs

@@ -20,18 +20,43 @@
           <:body>
             <h3>{{t 'resources.target.messages.proxy_url.title'}}
               (<code>{{t 'resources.target.types.tcp'}}</code>)</h3>
-            <Copyable
-              @text={{session.proxy}}
-              @buttonText={{t 'actions.copy-to-clipboard'}}
-              @acknowledgeText={{t 'states.copied'}}
-            >
-              <code>{{session.proxy_address}}:{{session.proxy_port}}</code>
-            </Copyable>
+            <p>
+              <Copyable
+                @text={{session.proxy}}
+                @buttonText={{t 'actions.copy-to-clipboard'}}
+                @acknowledgeText={{t 'states.copied'}}
+              >
+                <code>{{session.proxy_address}}:{{session.proxy_port}}</code>
+              </Copyable>
+            </p>
 
-            {{! <Rose::Separator />
+            {{!-- <Rose::Separator />
 
-            <h3>Credentials</h3> }}
+            <h3>Credentials</h3>
 
+            <Card @heading='Credentials' @icon='app-icons/credentials'>
+              <:body>
+                <Rose::Table @style='condensed' as |table|>
+                  <table.header as |header|>
+                    <header.row as |row|>
+                      <row.headerCell @shrink={{true}}>Key</row.headerCell>
+                      <row.headerCell colspan='2'>Value</row.headerCell>
+                    </header.row>
+                  </table.header>
+                  <table.body as |body|>
+                    <body.row as |row|>
+                      <row.headerCell>Foo</row.headerCell>
+                      <row.cell>Value</row.cell>
+                    </body.row>
+                    <body.row as |row|>
+                      <row.headerCell>ttl</row.headerCell>
+                      <row.cell>Test</row.cell>
+                    </body.row>
+                  </table.body>
+                </Rose::Table>
+              </:body>
+            </Card>
+--}}
           </:body>
           <:footer>
             <div>
@@ -58,4 +83,4 @@
   {{/each}}
 {{/each}}
 
-{{outlet}}
+{{outlet}}