From 20a05dc96a59373d16d12eb8cc606f678a1f7604 Mon Sep 17 00:00:00 2001
From: Lisbet Alvarez <107949262+lisbet-alvarez@users.noreply.github.com>
Date: Tue, 29 Apr 2025 12:17:14 -0700
Subject: [PATCH] =?UTF-8?q?style:=20=F0=9F=92=84=20fix=20formatting=20for?=
 =?UTF-8?q?=20long=20credential=20names=20&=20description=20(#2804)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-16869
---
 .../app/components/credentials-panel/index.hbs       | 12 ++++++++----
 ui/desktop/app/styles/app.scss                       |  5 +++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/ui/desktop/app/components/credentials-panel/index.hbs b/ui/desktop/app/components/credentials-panel/index.hbs
index 0a5df3ed4..28d8b9b85 100644
--- a/ui/desktop/app/components/credentials-panel/index.hbs
+++ b/ui/desktop/app/components/credentials-panel/index.hbs
@@ -48,16 +48,20 @@
   {{else}}
     <div class='credential-panel-body'>
       <div class='credential-header'>
-        <div class='credential-name hds-typography-display-200'>
+        <Hds::Text::Display class='credential-name' @weight='semibold'>
           {{#if credential.source.name}}
             {{credential.source.name}}
           {{else}}
             {{credential.source.id}}
           {{/if}}
-        </div>
-        <div class='hds-typography-body-100'>
+        </Hds::Text::Display>
+        <Hds::Text::Body
+          class='credential-description'
+          @size='100'
+          @weight='semibold'
+        >
           {{credential.source.description}}
-        </div>
+        </Hds::Text::Body>
       </div>
 
       <ul class='credential-secret'>
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index a9526680c..7471bda60 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -479,8 +479,9 @@
   }
 }
 
-.credential-name {
-  font-weight: var(--token-typography-font-weight-semibold);
+.credential-name,
+.credential-description {
+  overflow-wrap: break-word;
 }
 
 .raw-credential-panel-body {