fix: provide scroll area to scroll the list of annotaions wheever it excedd it's viewport

additionally reintroduce the styling lost during last merge for the annotations

src/components/annotations/annotations.vue

@@ -293,17 +293,3 @@ export default {
   display: none;
 }
 </style>
-
-<style lang="scss" scoped>
-.q-item {
-  min-height: unset;
-}
-
-.q-item__section--avatar {
-  min-width: 24px;
-}
-
-.q-item__section--side {
-  padding-right: unset;
-}
-</style>

src/components/annotations/list.vue

 <template>
-  <q-list>
-    <q-item
-      v-for="annotation in configuredAnnotations"
-      :id="'list' + annotation.strippedId"
-      :key="annotation.strippedId"
-      class="q-pa-sm q-pl-xs q-mb-xs"
-      clickable
-      padding="xs"
-      @click="toggle(annotation); statusCheck();"
-    >
-      <q-item-section
-        avatar
-        class="q-mr-none"
+  <q-scroll-area
+    class="scroll-area"
+  >
+    <q-list>
+      <q-item
+        v-for="annotation in configuredAnnotations"
+        :id="'list' + annotation.strippedId"
+        :key="annotation.strippedId"
+        class="q-pa-sm q-pl-xs q-mb-xs"
+        clickable
+        padding="xs"
+        @click="toggle(annotation); statusCheck();"
       >
-        <q-icon
-          :name="getIcon(annotation.body['x-content-type'])"
-          size="16px"
-        />
-      </q-item-section>
+        <q-item-section
+          avatar
+          class="q-mr-none"
+        >
+          <q-icon
+            :name="getIcon(annotation.body['x-content-type'])"
+            size="16px"
+          />
+        </q-item-section>
 
-      <q-item-section>
-        <AnnotationUrls :content="annotation.body.value" />
-      </q-item-section>
-    </q-item>
-  </q-list>
+        <q-item-section>
+          <AnnotationUrls :content="annotation.body.value" />
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </q-scroll-area>
 </template>
 
 <script>
@@ -54,3 +58,21 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.q-item {
+  min-height: unset;
+}
+
+.q-item__section--avatar {
+  min-width: 24px;
+}
+
+.q-item__section--side {
+  padding-right: unset;
+}
+
+.scroll-area {
+  height: 720;
+}
+</style>

src/index.template.html

@@ -31,7 +31,7 @@
     -->
     <script id="tido-config" type="application/json">
     {
-			"entrypoint": "",
+			"entrypoint": "https://ahikar-dev.sub.uni-goettingen.de/api/textapi/ahikar/syriac/collection.json",
       "annotations": {
         "show": true,
         "types": [