Make overflow more dynamic in HighlightSidebar

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,13 +169,16 @@ const noteWithUrls = computed(() => {
     text-overflow: ellipsis;
     position: relative;
     /* white-space: nowrap; */
+
+    &--overflow {
       &::after {
         content: '...';
         position: absolute;
-      right: 5px;
+        right: 10px;
         bottom: 0;
       }
     }
+  }
 
   &__note-form {
     min-height: 100px;