DlData: prevent text overflow from being visible in padding (#1110)

getodk · Dec 17, 2024 · eea4324 · eea4324
1 parent dd7c94c
commit eea4324
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git 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
@@ -41,15 +41,15 @@ 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 () => {
       const component = mountComponent({
         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();
     });
   });