pdb-js/src/app/plot-view/plot-view.component.html

@@ -5,9 +5,11 @@
     class="plot-view--legend" 
     [cdkDragFreeDragPosition]="legendInitialPosition">
   <div cdkDragHandle></div>
+  <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">

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;
 }