From 49e528ebf9c9032a497de63191b7ae3ad5e7b89c Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <DebaucheryLibrarian@unknown.name>
Date: Sun, 4 Aug 2024 23:50:26 +0200
Subject: [PATCH] Added additional container to scenes component to prevent
 gaps between grid tiles.

---
 components/scenes/scenes.vue | 42 ++++++++++++++++++++----------------
 components/stashes/stash.vue |  4 ++++
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/components/scenes/scenes.vue b/components/scenes/scenes.vue
index b1f1839..b07f8cd 100644
--- a/components/scenes/scenes.vue
+++ b/components/scenes/scenes.vue
@@ -114,25 +114,25 @@
 				/>
 			</nav>
 
-			<ul
-				class="scenes nolist"
-			>
-				<template v-for="item in campaignScenes">
-					<li
-						v-if="item === 'campaign' && sceneCampaign"
-						:key="`campaign-${item.id}`"
-					>
-						<Campaign :campaign="sceneCampaign" />
-					</li>
+			<div class="scenes-items">
+				<ul class="scenes nolist">
+					<template v-for="item in campaignScenes">
+						<li
+							v-if="item === 'campaign' && sceneCampaign"
+							:key="`campaign-${item.id}`"
+						>
+							<Campaign :campaign="sceneCampaign" />
+						</li>
 
-					<li
-						v-else
-						:key="`scene-${item.id}`"
-					>
-						<SceneTile :scene="item" />
-					</li>
-				</template>
-			</ul>
+						<li
+							v-else
+							:key="`scene-${item.id}`"
+						>
+							<SceneTile :scene="item" />
+						</li>
+					</template>
+				</ul>
+			</div>
 
 			<Pagination
 				:total="total"
@@ -344,11 +344,15 @@ function updateFilter(prop, value, reload = true) {
 	margin-bottom: .5rem;
 }
 
+.scenes-items {
+	/* grow additional container to prevent gaps between grid tiles */
+	flex-grow: 1;
+}
+
 .scenes {
 	display: grid;
     grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
 	gap: .5rem;
-	flex-grow: 1;
 	padding: .5rem 1rem 1rem 1rem;
 
 	:deep(.campaign) .campaign-banner {
diff --git a/components/stashes/stash.vue b/components/stashes/stash.vue
index c039afe..01f6b02 100644
--- a/components/stashes/stash.vue
+++ b/components/stashes/stash.vue
@@ -60,6 +60,7 @@ const stash = pageContext.pageProps.stash;
 .stash {
 	display: flex;
 	flex-direction: column;
+	flex-grow: 1;
 }
 
 .header {
@@ -115,6 +116,9 @@ const stash = pageContext.pageProps.stash;
 }
 
 .content {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
 	overflow-y: auto;
 }