#2520 - Sentence is cut off in the payment-streak tooltip (#2531)

* fix the regression on tooltip * add word-break rule
okTurtles · Jan 22, 2025 · 80397f4 · 80397f4
1 parent faadd19
commit 80397f4
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/frontend/views/components/Tooltip.vue b/frontend/views/components/Tooltip.vue
@@ -173,8 +173,8 @@ export default ({
             break
           case 'bottom-left':
             x = 0
-            y = '100%'
-            absPosition = { bottom: `-${spacing}px` }
+            y = `${spacing}px`
+            absPosition = { top: '100%' }
             break
           case 'bottom-right':
             x = '-100%'
@@ -391,6 +391,7 @@ export default ({
 
 .c-anchored-tooltip {
   width: max-content;
+  height: max-content;
 }
 
 .c-background {

diff --git a/frontend/views/containers/dashboard/GroupMembersActivity.vue b/frontend/views/containers/dashboard/GroupMembersActivity.vue
@@ -23,7 +23,7 @@
             .icon-star.icon-round.has-background-success.has-text-success
             .c-item-copy
               //- Todo: discuss if tooltip better than toggle
-              sentence-with-member-tooltip(:members='onTimePayments')
+              sentence-with-member-tooltip(:members='onTimePayments' :noEllpsis='true')
                 .member-count-sentence(v-safe-html='memberCountSentences["onTimePayments"]')
 
     .c-column

diff --git a/frontend/views/containers/dashboard/SentenceWithMemberTooltip.vue b/frontend/views/containers/dashboard/SentenceWithMemberTooltip.vue
@@ -17,7 +17,8 @@ component(
       v-for='(name, index) in members'
       :key='`member-${index}`'
     )
-      .has-ellipsis {{ name }}
+      .has-ellipsis(v-if='!noEllpsis') {{ name }}
+      div(v-else) {{ name }}
 </template>
 
 <script>
@@ -29,7 +30,11 @@ export default ({
     Tooltip
   },
   props: {
-    members: Array
+    members: Array,
+    noEllpsis: {
+      type: Boolean,
+      default: false
+    }
   }
 }: Object)
 </script>
@@ -42,5 +47,6 @@ export default ({
   flex-direction: column;
   align-items: stretch;
   font-weight: normal;
+  word-break: break-word;
 }
 </style>