Hiding more than 2 rows of tags under expand button on scene page. Fixed album background being bright in dark mode.

assets/components/releases/tags.vue

@@ -1,19 +1,60 @@
 <template>
-	<ul class="tags nolist">
-		<li
-			v-for="tag in tags"
-			:key="`tag-${tag.slug}`"
-			class="tag"
+	<div
+		class="tags-container"
+		:class="{ overflowing }"
+	>
+		<ul
+			ref="tags"
+			class="tags nolist"
+			:class="{ expanded }"
 		>
-			<a
-				:href="`/tag/${tag.slug}`"
-				class="link"
-			>{{ tag.name }}</a>
-		</li>
-	</ul>
+			<li
+				v-for="tag in tags"
+				:key="`tag-${tag.slug}`"
+				class="tag"
+			>
+				<a
+					:href="`/tag/${tag.slug}`"
+					class="link"
+				>{{ tag.name }}</a>
+			</li>
+		</ul>
+
+		<button
+			v-if="overflowing && !expanded"
+			class="tags-more"
+			@click="expanded = true"
+		>More tags</button>
+
+		<button
+			v-if="expanded"
+			class="tags-more"
+			@click="expanded = false"
+		>Fewer tags</button>
+	</div>
 </template>
 
 <script>
+function updateOverflowing() {
+	const containerBoundaries = this.$refs.tags.getBoundingClientRect();
+	const containerBottom = containerBoundaries.top + containerBoundaries.height;
+
+	this.overflowing = Array.from(this.$refs.tags.querySelectorAll('.tag')).some((tag) => {
+		const tagBoundaries = tag.getBoundingClientRect();
+
+		return tagBoundaries.top > containerBottom;
+	});
+}
+
+function mounted() {
+	window.addEventListener('resize', this.updateOverflowing);
+	this.updateOverflowing();
+}
+
+function beforeUnmount() {
+	window.removeEventListener('resize', this.updateOverflowing);
+}
+
 export default {
 	props: {
 		tags: {
@@ -21,10 +62,39 @@ export default {
 			default: () => [],
 		},
 	},
+	data() {
+		return {
+			overflowing: false,
+			expanded: false,
+		};
+	},
+	mounted,
+	beforeUnmount,
+	methods: {
+		updateOverflowing,
+	},
 };
 </script>
 
 <style lang="scss" scoped>
+.tags-container {
+	margin: 0 0 1.5rem 0;
+
+	&.overflowing {
+		margin: 0 0 .5rem 0;
+	}
+}
+
+.tags {
+	max-height: 4.6rem;
+	padding: 2px 1rem 0 1rem;
+	overflow: hidden;
+
+	&.expanded {
+		max-height: unset;
+	}
+}
+
 .tag .link {
 	color: var(--link);
     background: var(--background);
@@ -39,4 +109,21 @@ export default {
         color: var(--primary);
     }
 }
+
+.tags-more {
+	width: 100%;
+	background: none;
+	padding: .5rem 1rem;
+	border: solid 1px var(--shadow-hint);
+	border-left: none;
+	border-right: none;
+	margin: .25rem 0 .5rem 0;
+	color: var(--shadow);
+	font-size: .9rem;
+
+	&:hover {
+		cursor: pointer;
+		color: var(--shadow-strong);
+	}
+}
 </style>