From 7b5d42d313bc00b0a55e053ab0318c400abae79b Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Mon, 16 Dec 2024 14:48:13 -0500
Subject: [PATCH] DlData: prevent text overflow from being visible in padding

---
 src/components/dl-data.vue      | 10 ++++++----
 test/components/dl-data.spec.js |  4 ++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/dl-data.vue b/src/components/dl-data.vue
index 9edb0772c..d6997807c 100644
--- a/src/components/dl-data.vue
+++ b/src/components/dl-data.vue
@@ -19,7 +19,7 @@ are too long. -->
   <dd v-if="value == null || value === ''" class="dl-data-dd empty">
     {{ $t('common.emptyValue') }}
   </dd>
-  <dd v-else class="dl-data-dd" v-tooltip.text>{{ value }}</dd>
+  <dd v-else class="dl-data-dd"><div v-tooltip.text>{{ value }}</div></dd>
 </template>
 
 <script setup>
@@ -43,9 +43,11 @@ defineProps({
 .dl-data-dt { @include text-overflow-ellipsis; }
 
 .dl-data-dd {
-  @include line-clamp(3);
-  overflow-wrap: break-word;
-  white-space: break-spaces;
+  div {
+    @include line-clamp(3);
+    overflow-wrap: break-word;
+    white-space: break-spaces;
+  }
 
   &.empty {
     @include italic;
diff --git a/test/components/dl-data.spec.js b/test/components/dl-data.spec.js
index e9bc5308b..68d0eccce 100644
--- a/test/components/dl-data.spec.js
+++ b/test/components/dl-data.spec.js
@@ -41,7 +41,7 @@ describe('DlData', () => {
         props: { name: 'notes', value: 'The\ntree\nis\ntall.' },
         attachTo: document.body
       });
-      await component.get('dd').should.have.tooltip('The\ntree\nis\ntall.');
+      await component.get('dd div').should.have.tooltip('The\ntree\nis\ntall.');
     });
 
     it('does not show a tooltip if the value fits within 3 lines', async () => {
@@ -49,7 +49,7 @@ describe('DlData', () => {
         props: { name: 'notes', value: 'Tall' },
         attachTo: document.body
       });
-      await component.get('dd').should.not.have.tooltip();
+      await component.get('dd div').should.not.have.tooltip();
     });
   });