fix(kms): display name style issue

ref: MANAGER-15972 Signed-off-by: Nicolas Pierre-charles <[email protected]>
ovh · Nov 26, 2024 · 08b965b · 08b965b
1 parent c03894f
commit 08b965b
Showing 1 changed file with 18 additions and 13 deletions.
diff --git a/...ice/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/InformationsTile.tsx b/...ice/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/InformationsTile.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   Clipboard,
+  Description,
   Region,
   ServiceDetails,
 } from '@ovh-ux/manager-react-components';
@@ -51,20 +52,24 @@ const InformationsTile = ({
       <TileSeparator />
       <TileItem title={t('key_management_service_dashboard_field_label_name')}>
         <div className="flex justify-between items-center">
-          <TileValue value={okmsServiceInfos?.resource.displayName} />
-          <OsdsButton
-            circle
-            variant={ODS_BUTTON_VARIANT.stroked}
-            color={ODS_THEME_COLOR_INTENT.primary}
-            onClick={() => navigate('update-name')}
-          >
-            <OsdsIcon
-              aria-label="edit"
-              name={ODS_ICON_NAME.PEN}
-              size={ODS_ICON_SIZE.xs}
+          <Description className="break-all">
+            {okmsServiceInfos?.resource.displayName}
+          </Description>
+          <div className="min-w-fit">
+            <OsdsButton
+              circle
+              variant={ODS_BUTTON_VARIANT.stroked}
               color={ODS_THEME_COLOR_INTENT.primary}
-            />
-          </OsdsButton>
+              onClick={() => navigate('update-name')}
+            >
+              <OsdsIcon
+                aria-label="edit"
+                name={ODS_ICON_NAME.PEN}
+                size={ODS_ICON_SIZE.xs}
+                color={ODS_THEME_COLOR_INTENT.primary}
+              />
+            </OsdsButton>
+          </div>
         </div>
       </TileItem>
       <TileSeparator />