Using scroll component for release banner, adding expand button.

assets/components/actors/photos.vue

@@ -105,16 +105,11 @@ export default {
 }
 
 .photo {
-	width: 10rem;
     height: 15rem;
     box-shadow: 0 0 3px $shadow-weak;
 	object-fit: cover;
 }
 
-.expand {
-	border-bottom: solid 1px var(--darken-hint);
-}
-
 @media(max-width: $breakpoint3) {
 	.photos {
 		&.empty.avatar {

assets/components/releases/banner.vue

@@ -1,8 +1,5 @@
 <template>
-	<div
+	<div class="banner">
-		class="banner"
-		@wheel.prevent="scrollBanner"
-	>
 		<div class="trailer">
 			<video
 				v-if="release.trailer"
@@ -110,10 +107,6 @@ function photos() {
 	return this.release.photos;
 }
 
-function scrollBanner(event) {
-	event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
-}
-
 export default {
 	props: {
 		release: {
@@ -131,9 +124,6 @@ export default {
 		photos,
 		sfw,
 	},
-	methods: {
-		scrollBanner,
-	},
 };
 </script>
 
@@ -141,14 +131,20 @@ export default {
 @import 'theme';
 
 .banner {
-    background: var(--empty);
+    background: var(--background-dim);
     flex-shrink: 0;
     white-space: nowrap;
     overflow-x: auto;
     scrollbar-width: none;
-    box-shadow: 0 0 3px var(--shadow);
+	scroll-behavior: smooth;
     font-size: 0;
 
+	&.expanded {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+	}
+
     &::-webkit-scrollbar {
         display: none;
     }
@@ -187,6 +183,8 @@ export default {
     display: inline-flex;
     align-items: center;
     justify-content: center;
+	margin: .5rem;
+	box-shadow: 0 0 3px var(--shadow-weak);
 
     .warning {
         display: none;

assets/components/releases/release.vue

@@ -3,8 +3,6 @@
 		v-if="release"
 		class="content"
 	>
-		<Banner :release="release" />
-
 		<div class="details">
 			<div class="column">
 				<a
@@ -94,9 +92,21 @@
 			</div>
 		</div>
 
+		<Scroll class="scroll-light">
+			<Banner :release="release" />
+
+			<template v-slot:expanded>
+				<Banner
+					:release="release"
+					class="expanded"
+				/>
+			</template>
+		</Scroll>
+
 		<div class="info column">
 			<h2 class="row title">{{ release.title }}</h2>
 
+			<span class="row-label">Actors</span>
 			<div class="row associations">
 				<ul
 					v-lazy-container="{ selector: '.lazy' }"
@@ -129,12 +139,12 @@
 				/>
 			</div>
 
+			<span class="row-label">Tags</span>
+
 			<div
 				v-if="release.tags.length > 0"
 				class="row"
 			>
-				<Icon icon="price-tags3" />
-
 				<ul class="tags nolist">
 					<li
 						v-for="tag in release.tags"
@@ -163,11 +173,12 @@
 				<span class="duration-segment">{{ (release.duration % 60).toString().padStart(2, '0') }}</span>
 			</div>
 
+			<span class="row-label">Description</span>
+
 			<p
 				v-if="release.description"
 				class="row description"
 			>
-				<Icon icon="info2" />
 				{{ release.description }}
 			</p>
 
@@ -201,9 +212,8 @@
 				>{{ release.shootId }}</a>
 			</div>
 
+			<span class="row-label">Added</span>
 			<span class="row">
-				<Icon icon="drawer-in" />
-
 				<a
 					:href="`/added/${formatDate(release.dateAdded, 'YYYY-MM-DD')}`"
 					:title="`Added on ${formatDate(release.dateAdded, 'MMMM D, YYYY')}`"
@@ -224,6 +234,7 @@ import Banner from './banner.vue';
 import Actor from '../tile/actor.vue';
 import Release from '../tile/release.vue';
 import Releases from './releases.vue';
+import Scroll from '../scroll/scroll.vue';
 
 function pageTitle() {
 	return this.release && this.release.title;
@@ -248,6 +259,7 @@ export default {
 		Banner,
 		Release,
 		Releases,
+		Scroll,
 	},
 	data() {
 		return {
@@ -296,6 +308,18 @@ export default {
     }
 }
 
+.row-label {
+	display: block;
+	margin: 0 0 .5rem 0;
+	color: var(--shadow);
+	font-weight: bold;
+
+	.icon {
+		margin: 0 .5rem 0 0;
+		fill: var(--shadow);
+	}
+}
+
 .details {
     background: var(--profile);
     color: var(--text-light);
@@ -397,9 +421,6 @@ export default {
     margin: 0 1rem .5rem 0;
 }
 
-.movies {
-}
-
 .filename {
     width: 100%;
     padding: .5rem;

assets/components/scroll/scroll.vue

@@ -78,7 +78,7 @@ function mounted() {
 	});
 
 	window.addEventListener('resize', this.updateScroll);
-	this.updateScroll();
+	setTimeout(() => this.updateScroll(), 500); // allow CSS to calculate
 }
 
 function beforeDestroy() {
@@ -135,6 +135,10 @@ export default {
 	}
 }
 
+.expand-light {
+	display: none;
+}
+
 .scroll-light {
 	background: var(--background-dim);
 
@@ -164,6 +168,10 @@ export default {
 	.expand-dark {
 		display: none;
 	}
+
+	.expand-light {
+		display: block;
+	}
 }
 
 .scroll-dark {
@@ -195,6 +203,10 @@ export default {
 	.expand-light {
 		display: none;
 	}
+
+	.expand-dark {
+		display: block;
+	}
 }
 
 .scroll-button {
@@ -205,6 +217,7 @@ export default {
 	position: absolute;
 	top: 0;
 	bottom: 0;
+	z-index: 10;
 
 	&.scroll-start,
 	&.scroll-end {