From b0467c4571c4462bbc4effb9a9ec1ecef589a001 Mon Sep 17 00:00:00 2001
From: Andreas Huber <andreas.huber@lucares.de>
Date: Tue, 3 Oct 2023 14:12:59 +0200
Subject: [PATCH] better scrolling of legend

---
 pdb-js/src/app/plot-view/plot-view.component.html |  8 +++++---
 pdb-js/src/app/plot-view/plot-view.component.scss | 15 +++++++++++----
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/pdb-js/src/app/plot-view/plot-view.component.html b/pdb-js/src/app/plot-view/plot-view.component.html
index 9b08568..3e75339 100644
--- a/pdb-js/src/app/plot-view/plot-view.component.html
+++ b/pdb-js/src/app/plot-view/plot-view.component.html
@@ -5,9 +5,11 @@
     class="plot-view--legend" 
     [cdkDragFreeDragPosition]="legendInitialPosition">
   <div cdkDragHandle></div>
-  <ol>
-    <li *ngFor="let stat of dataSeries()"><div class="{{ pointTypeClass(stat.dashTypeAndColor) }}" title="{{ stat.name }}"></div>{{ stat.name }}</li>
-  </ol>
+  <div class="plot-view--legend-content">
+    <ol>
+      <li *ngFor="let stat of dataSeries()"><div class="{{ pointTypeClass(stat.dashTypeAndColor) }}" title="{{ stat.name }}"></div>{{ stat.name }}</li>
+    </ol>
+  </div>
 </div>
 <div
   *ngIf="imageUrl">
diff --git a/pdb-js/src/app/plot-view/plot-view.component.scss b/pdb-js/src/app/plot-view/plot-view.component.scss
index 78a3f79..82de9b3 100644
--- a/pdb-js/src/app/plot-view/plot-view.component.scss
+++ b/pdb-js/src/app/plot-view/plot-view.component.scss
@@ -23,7 +23,6 @@ img {
 }
 
 .plot-view--legend {
-  padding-bottom: 0.5em;
   border: solid 1px #ccc;
   display: flex;
   flex-direction: column;
@@ -36,9 +35,6 @@ img {
               0 2px 2px 0 rgba(0, 0, 0, 0.14),
               0 1px 5px 0 rgba(0, 0, 0, 0.12);
   background-color: white;
-  max-height: 30em;
-  overflow: auto;
-  max-width: 60em;
 }
 
 .plot-view--legend:active {
@@ -58,6 +54,15 @@ img {
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAF0lEQVQI12P4//8/AwMDhGSEUFCAUwYAJl4R8Z1D4wIAAAAASUVORK5CYII=);
 }
 
+.plot-view--legend-content {
+  max-height: 30em;
+  overflow: auto;
+  max-width: 60em;
+  overflow: auto;
+  resize: both;
+  padding-bottom: 0.5em;
+}
+
 .plot-view--legend ol {
   padding-inline-start: 0.7em;
 }
@@ -70,4 +75,6 @@ img {
 }
 .plot-view--legend ol li .plot-details-plotType{
   margin-right: 0.3em; 
+  flex-shrink: 0;
+  flex-grow: 0;
 }
\ No newline at end of file