Text area now scrolls correctly

datasets/aud1.json

@@ -26,7 +26,7 @@
       "id":  "id6",
       "name": "Eulertouren",
       "image": "eulertouren.png",
-      "description": "Ein Eulerkreis ist in der Graphentheorie ein Zyklus, der alle Kanten eines Graphen genau einmal enthält. Ein offener Eulerzug (auch Eulerpfad oder Eulerweg) ist gegeben, wenn Start- und Endknoten nicht gleich sein müssen, wenn also statt eines Zyklus lediglich eine Kantenfolge verlangt wird, welche jede Kante des Graphen genau einmal enthält. Ein bekanntes Beispiel ist das Haus vom Nikolaus."
+      "description": "Ein Eulerkreis ist in der Graphentheorie ein Zyklus, der alle Kanten eines Graphen genau einmal enthält. Ein offener Eulerzug (auch Eulerpfad oder Eulerweg) ist gegeben, wenn Start- und Endknoten nicht gleich sein müssen, wenn also statt eines Zyklus lediglich eine Kantenfolge verlangt wird, welche jede Kante des Graphen genau einmal enthält. Ein bekanntes Beispiel ist das Haus vom Nikolaus. Dieser Text braucht noch eine Zeile, damit er gescrollt werden muss."
     },
     {
       "id":  "id7",

display/infooverlay.js

@@ -35,8 +35,6 @@ class InfoOverlay {
         bottomContainerLinkDiv.className = 'bottom-container-links';
         bottomContainerDiv.appendChild(bottomContainerLinkDiv);
 
-        //const linkClasses = this.graph.getLinkClasses();
-
         for(const [cls, color] of Object.entries(this.graph.edgeColors)) {
 
             const navTab = document.createElement('div');
@@ -98,9 +96,13 @@ class InfoOverlay {
         close.className = 'close-button';
         overlayNode.appendChild(close);
 
+        const infoArea = document.createElement('div');
+        infoArea.className = 'detail-view-info-area';
+        overlayNode.appendChild(infoArea);
+
         const topArea = document.createElement('div');
         topArea.className = 'detail-view-top-area';
-        overlayNode.appendChild(topArea);
+        infoArea.appendChild(topArea);
 
         const nodeImage = document.createElement('img');
         nodeImage.id = 'infoOverlayImage';
@@ -116,7 +118,7 @@ class InfoOverlay {
 
         const textArea = document.createElement('div');
         textArea.className = 'detail-view-text-area';
-        overlayNode.appendChild(textArea);
+        infoArea.appendChild(textArea);
 
         const description = document.createElement('p');
         description.id = 'infoOverlayDescription';

kg-style.css

@@ -18,7 +18,7 @@
     pointer-events: all;
     z-index: 99;
     cursor: pointer;
-    right: 10px;
+    right: 30px;
     top: 5px;
     position: absolute;
     font-size: 20px;
@@ -47,6 +47,11 @@
     margin-bottom: 20px;
 }
 
+.detail-view-info-area {
+    overflow-y: auto;
+    height: 100%;
+}
+
 .detail-view-top-area {
     position: relative;
     width: 100%;
@@ -58,8 +63,7 @@
     display: block;
     padding-left: 25px;
     padding-right: 25px;
-    height: 45%;
-    overflow-y: scroll;
+    padding-bottom: 130px;
 }
 
 .detail-view-headline {