From c2561c2014e2c72535fa6841205daf902fd6611a Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 28 Feb 2024 15:38:21 +0100
Subject: [PATCH] Make overflow more dynamic in HighlightSidebar

---
 .../highlights/HighlightSidebar.vue           | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/client/src/components/highlights/HighlightSidebar.vue b/client/src/components/highlights/HighlightSidebar.vue
index 60f63ba3..cc55e8d2 100644
--- a/client/src/components/highlights/HighlightSidebar.vue
+++ b/client/src/components/highlights/HighlightSidebar.vue
@@ -13,7 +13,7 @@
       <h2 class="heading-4">Meine Markierung</h2>
       <mark
         class="paragraph highlight-sidebar__highlighted-text"
-        :class="[`highlight--${highlight.color}`]"
+        :class="[`highlight--${highlight.color}`, { 'highlight-sidebar__highlighted-text--overflow': isOverflowing }]"
         data-cy="highlight-in-sidebar"
         ref="highlightMark"
       >
@@ -112,6 +112,14 @@ const parseUrls = (text: string) => {
 const noteWithUrls = computed(() => {
   return parseUrls(note.value);
 });
+
+const isOverflowing = computed(() => {
+  const element = highlightMark.value;
+  if (element) {
+    return element.scrollHeight > element.clientHeight;
+  }
+  return false;
+});
 </script>
 
 <style scoped lang="postcss">
@@ -161,11 +169,14 @@ const noteWithUrls = computed(() => {
     text-overflow: ellipsis;
     position: relative;
     /* white-space: nowrap; */
-    &::after {
-      content: '...';
-      position: absolute;
-      right: 5px;
-      bottom: 0;
+
+    &--overflow {
+      &::after {
+        content: '...';
+        position: absolute;
+        right: 10px;
+        bottom: 0;
+      }
     }
   }