From 90331bd0293b0c7544aeabe48479cf49e1722bb8 Mon Sep 17 00:00:00 2001
From: Andreas Huber <bitbucket@lucares.de>
Date: Sun, 17 Nov 2019 19:57:05 +0100
Subject: [PATCH] fix: card grid grid gets streched if vertical space is not
 used fully

Fixed by adding a container for the card grid.
That way the actual card grid has no height and
is therefore not streched vertically.
---
 .../gallery-view/gallery-view.component.html    | 17 ++++++++++-------
 .../gallery-view/gallery-view.component.scss    |  6 ++++--
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/pdb-js/src/app/gallery-view/gallery-view.component.html b/pdb-js/src/app/gallery-view/gallery-view.component.html
index 23d404c..f15a759 100644
--- a/pdb-js/src/app/gallery-view/gallery-view.component.html
+++ b/pdb-js/src/app/gallery-view/gallery-view.component.html
@@ -20,11 +20,14 @@
     <pdb-gallery-filter-view (valueChanged)="filterChanged($event)"></pdb-gallery-filter-view>
     
   </div>
-<div
-  *ngIf="show" 
-  id="gallery" 
-  class="card-grid-300">
-  <pdb-gallery-item-view
-    *ngFor="let galleryItem of filteredSortedGalleryItems()" [data]="galleryItem">
-  </pdb-gallery-item-view>
+  <div
+    *ngIf="show"
+    class="card-grid-container">
+    <div
+      id="gallery" 
+      class="card-grid-300">
+      <pdb-gallery-item-view
+        *ngFor="let galleryItem of filteredSortedGalleryItems()" [data]="galleryItem">
+      </pdb-gallery-item-view>
+    </div>
 </div>
diff --git a/pdb-js/src/app/gallery-view/gallery-view.component.scss b/pdb-js/src/app/gallery-view/gallery-view.component.scss
index dea0b1b..d9c133d 100644
--- a/pdb-js/src/app/gallery-view/gallery-view.component.scss
+++ b/pdb-js/src/app/gallery-view/gallery-view.component.scss
@@ -6,13 +6,15 @@
   background-color: #f8f8f8;
 }
 
+.card-grid-container {
+  overflow-y: auto;
+  height: calc(100% - 4.5em);
+}
 
 .card-grid-300 {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 300px));
   grid-gap: 10px;
   padding: 10px;
-  overflow-y: auto;
-  height: calc(100% - 4.5em);
 }