browse page thumbnail spillover fix

Author: thePortus

src/app/components/browse-models/browse-models.component.html

@@ -12,18 +12,20 @@
         </mat-form-field>
       </mat-card-content>
     </mat-card>
-    <mat-grid-list #gridContainer [cols]="gridCols" rowHeight="2:1" gutterSize="10px" infiniteScroll [infiniteScrollDistance]="1" [infiniteScrollThrottle]="50" (scrolled)="loadMoreItems()">
-      @for (item of displayedData; track item) {
-        <mat-grid-tile class="rounded-xl border-solid border border-sky-800" [routerLink]="['/items', item.id]">
-          <div class="thumbnail" [ngStyle]="{'background-image': 'url(' + thumbnails[item.filename] + ')'}">
-            <mat-grid-tile-footer>
-              <span class="!text-xl">
-                {{ item.title }}
-              </span>
-            </mat-grid-tile-footer>
-          </div>
-        </mat-grid-tile>
-      }
-    </mat-grid-list>
+    <div class="grid-scroll-container">
+      <mat-grid-list #gridContainer [cols]="gridCols" rowHeight="2:1" gutterSize="10px" infiniteScroll [infiniteScrollDistance]="1" [infiniteScrollThrottle]="50" (scrolled)="loadMoreItems()">
+        @for (item of displayedData; track item) {
+          <mat-grid-tile class="rounded-xl border-solid border border-sky-800" [routerLink]="['/items', item.id]">
+            <div class="thumbnail" [ngStyle]="{'background-image': 'url(' + thumbnails[item.filename] + ')'}">
+              <mat-grid-tile-footer>
+                <span class="!text-xl">
+                  {{ item.title }}
+                </span>
+              </mat-grid-tile-footer>
+            </div>
+          </mat-grid-tile>
+        }
+      </mat-grid-list>
+    </div>
   </mat-card-content>
 </mat-card>

src/app/components/browse-models/browse-models.component.scss

@@ -28,5 +28,21 @@
 }
 
 .full-height {
-  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  height: 90vh; /* or whatever max height you want */
+  min-height: 0;
+}
+.mat-card-content {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.grid-scroll-container {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: 70vh;
+  overflow-y: auto;
+  transition: max-height 0.2s;
 }