Experiment with overflowing text and ellipses

client/src/components/highlights/HighlightSidebar.vue

@@ -4,19 +4,47 @@
       <cross class="highlight-sidebar__close-icon" />
     </div>
     <div class="highlight-sidebar__section highlight-sidebar__highlight">
-      <h2 class="highlight-sidebar__section-title">Meine Markierung</h2>
-      <mark class="highlight-sidebar__highlighted-text">
-        Haben Sie sich beim Shoppen schon mal überlegt, aus welchem Beweggrund Sie ein b...
+      <h2 class="heading-4">Meine Markierung</h2>
+      <mark
+        class="paragraph highlight-sidebar__highlighted-text"
+        ref="highlightMark"
+      >
+        hier ist ein bischen mehr text blabla blabla bla blabla blabla bla bla blabla blabla bla blabla blabla bla bla
+        noch mehr text noch mehr text
       </mark>
+      <pre>{{ overflowing }}</pre>
+      <pre>{{ highlightMark?.scrollHeight }}</pre>
+      <pre>{{ highlightMark?.clientHeight }}</pre>
     </div>
     <div class="highlight-sidebar__section highlight-sidebar__note">
-      <h2 class="highlight-sidebar__section-title">Meine Notiz</h2>
+      <h2 class="b">Meine Notiz</h2>
+      <div class="form-with-border highlight-sidebar__note-form">
+        <textarea
+          class="borderless-textarea"
+          placeholder="Hi"
+          v-auto-grow
+        ></textarea>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent } from 'vue';
+import { computed, defineAsyncComponent, ref } from 'vue';
+
+const highlightMark = ref<HTMLElement | null>(null);
+
+const overflowing = computed(() => {
+  const element = highlightMark.value;
+  if (element) {
+    console.log('element is here');
+    console.log(element.scrollHeight);
+    console.log(element.clientHeight);
+    console.log(element.scrollHeight > element.clientHeight);
+    return element.scrollHeight > element.clientHeight;
+  }
+  return false;
+});
 
 const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vue'));
 </script>
@@ -61,15 +89,24 @@ const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vu
     padding: var(--large-spacing) 0;
   }
 
-  &__section-title {
-    font-family: var(--sans-serif-font-family);
-    font-weight: 600;
-    font-size: var(--regular-font-size);
+  &__highlighted-text {
+    display: inline-block;
+    --num-lines: 3;
+    max-height: calc(var(--regular-font-size) * var(--paragraph-line-height) * var(--num-lines));
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+    /* white-space: nowrap; */
+    &::after {
+      content: '...';
+      position: absolute;
+      right: 5px;
+      bottom: 0;
+    }
   }
 
-  &__highlighted-text {
-    font-family: var(--serif-font-family);
-    line-height: 1.5rem;
+  &__note-form {
+    min-height: 100px;
   }
 }
 </style>