Add max height to finished highlight note also

client/src/components/highlights/HighlightSidebar.vue

@@ -46,7 +46,7 @@ their own content to be displayed -->
         <!-- eslint-disable vue/no-v-html -->
         <p
           data-cy="highlight-note-text"
-          class="highlight-sidebar__note"
+          class="highlight-sidebar__note-text"
           v-html="noteWithUrls"
         />
         <!-- .stop to prevent the click handler to close the sidebar (as the element won't be a child of the
@@ -122,6 +122,12 @@ const isOverflowing = computed(() => {
 });
 </script>
 
+<style lang="postcss">
+:root {
+  --max-note-height: 250px;
+}
+</style>
+
 <style scoped lang="postcss">
 @import 'styles/css/mixins/desktop.css';
 
@@ -186,9 +192,11 @@ const isOverflowing = computed(() => {
     min-height: 100px;
   }
 
-  &__note {
-    white-space: pre-line; /* display newlines as linebreaks */
+  &__note-text {
     margin-bottom: var(--medium-spacing);
+    max-height: var(--max-note-height);
+    overflow: scroll;
+    white-space: pre-line; /* display newlines as linebreaks */
   }
 
   &__edit-note {
@@ -196,7 +204,7 @@ const isOverflowing = computed(() => {
   }
 
   &__textarea {
-    max-height: 250px;
+    max-height: var(--max-note-height);
   }
 }
 </style>