diff --git a/packages/entities/entities-shared/sandbox/pages/ConfigCardItemPage.vue b/packages/entities/entities-shared/sandbox/pages/ConfigCardItemPage.vue
index 6f4708ca9e..46c82f9289 100644
--- a/packages/entities/entities-shared/sandbox/pages/ConfigCardItemPage.vue
+++ b/packages/entities/entities-shared/sandbox/pages/ConfigCardItemPage.vue
@@ -191,6 +191,40 @@
+
Truncated Labels
+
+
+
+
+
Slim card
+
+
+
+
diff --git a/packages/entities/entities-shared/src/components/entity-base-config-card/ConfigCardItem.cy.ts b/packages/entities/entities-shared/src/components/entity-base-config-card/ConfigCardItem.cy.ts
index 9700b06c2f..3c43255e72 100644
--- a/packages/entities/entities-shared/src/components/entity-base-config-card/ConfigCardItem.cy.ts
+++ b/packages/entities/entities-shared/src/components/entity-base-config-card/ConfigCardItem.cy.ts
@@ -54,11 +54,11 @@ describe('', () => {
cy.getTestId(`${item.key}-label-tooltip`).should('not.exist')
cy.get('.config-card-details-row').invoke('width').then((rowWidth) => {
- cy.getTestId(`${item.key}-label`).invoke('width').then((labelWidth) => {
+ cy.getTestId(`${item.key}-label`).invoke('outerWidth').then((labelWidth) => {
expect(labelWidth).to.be.closeTo(Number(rowWidth) / 2, 1)
})
- cy.getTestId(`${item.key}-plain-text`).invoke('width').then((labelWidth) => {
- expect(labelWidth).to.be.closeTo(Number(rowWidth) / 2, 1)
+ cy.getTestId(`${item.key}-value`).invoke('outerWidth').then((valueWidth) => {
+ expect(valueWidth).to.be.closeTo(Number(rowWidth) / 2, 1)
})
})
})
diff --git a/packages/entities/entities-shared/src/components/entity-base-config-card/ConfigCardItem.vue b/packages/entities/entities-shared/src/components/entity-base-config-card/ConfigCardItem.vue
index 4454070776..c47cf42afc 100644
--- a/packages/entities/entities-shared/src/components/entity-base-config-card/ConfigCardItem.vue
+++ b/packages/entities/entities-shared/src/components/entity-base-config-card/ConfigCardItem.vue
@@ -9,7 +9,15 @@
name="label"
>
- {{ item.label }}
+
+
+ {{ item.label }}
+
+
+
{
}
})
+const labelContent = ref()
const textContent = ref()
+const { isTruncated: isLabelTruncated } = composables.useTruncationDetector(labelContent as Ref)
const { isTruncated } = composables.useTruncationDetector(textContent as Ref)
-