Fixed release banner, improved album layout.

assets/components/album/album.vue

@@ -11,7 +11,7 @@
 				/>
 			</div>
 
-			<div class="album">
+			<div class="album-items">
 				<div
 					v-for="item in items"
 					:key="item.id"
@@ -63,14 +63,12 @@ export default {
 	left: 0;
 	background: var(--shadow-extreme);
 	z-index: 10;
-	overflow-y: auto;
 }
 
 .album-header {
 	display: flex;
 	justify-content: space-between;
 	flex-shrink: 0;
-	overflow: hidden;
 }
 
 .album-title {
@@ -78,7 +76,7 @@ export default {
 	flex-grow: 1;
 	align-items: center;
 	justify-content: center;
-	padding: 1rem;
+	padding: .5rem 1rem;
 	margin: 0;
 	color: var(--text-light);
 	white-space: nowrap;
@@ -87,8 +85,8 @@ export default {
 }
 
 .close {
-	width: 2rem;
+	width: 1.5rem;
-	height: 2rem;
+	height: 1.5rem;
 	padding: 1rem;
 	fill: var(--lighten);
 
@@ -98,14 +96,15 @@ export default {
 	}
 }
 
-.album {
+.album-items {
 	display: grid;
 	flex-grow: 1;
 	align-items: center;
 	justify-content: center;
-	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
-	grid-gap: 1rem;
+	grid-gap: 0 1rem;
 	padding: 1rem;
+	overflow-y: auto;
 }
 
 .item-container {
@@ -114,13 +113,24 @@ export default {
 	justify-content: center;
 }
 
+.item-link {
+	height: 100%;
+}
+
 .item {
-	height: 15rem;
+	width: 100%;
+	margin: 0 0 1rem 0;
 }
 
 @media(max-width: $breakpoint) {
-	.album {
+	.album-items {
 		grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
 	}
 }
+
+@media(max-width: $breakpoint-nano) {
+	.album-items {
+		grid-template-columns: repeat(auto-fill, 1fr);
+	}
+}
 </style>

assets/components/releases/banner.vue

@@ -1,5 +1,8 @@
 <template>
-	<div class="media">
+	<div
+		class="media"
+		:class="{ center: release.photos.length < 2 }"
+	>
 		<div
 			v-if="release.trailer || release.teaser"
 			class="trailer-container"
@@ -161,12 +164,16 @@ export default {
 @import 'breakpoints';
 
 .media {
-	height: 18rem;
     flex-shrink: 0;
     white-space: nowrap;
     font-size: 0;
 }
 
+.media.center {
+	width: 1200px;
+	margin: 0 auto;
+}
+
 .poster-link {
     position: absolute;
     top: .5rem;
@@ -238,6 +245,7 @@ export default {
 
 .item {
 	max-width: 100%;
+	height: 18rem;
 	box-shadow: 0 0 3px var(--shadow-weak);
 	background-size: cover;
 }
@@ -269,23 +277,7 @@ export default {
     }
 }
 
-@media(max-width: $breakpoint-kilo) {
-	.media.expanded {
-		grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-	}
-}
-
-@media(max-width: $breakpoint) {
-	.media.expanded {
-		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
-	}
-}
-
 @media(max-width: $breakpoint-micro) {
-	.media.expanded {
-		grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-	}
-
 	.media:not(.expanded) .item,
     .trailer-container {
 		height: 56vw; /* 16:9 ratio for full-width video */

assets/components/releases/release.vue

@@ -8,8 +8,9 @@
 			class="scroll-light"
 			:expandable="false"
 		>
-			<Media
+			<Banner
 				:release="release"
+				class="media"
 				@load="slotProps.loaded"
 			/>
 		</Scroll>
@@ -17,6 +18,7 @@
 		<Details :release="release" />
 
 		<button
+			v-if="release.photos.length > 0"
 			class="album-toggle"
 			@click="showAlbum = true"
 		><Icon icon="grid3" />View album</button>
@@ -197,7 +199,7 @@
 
 <script>
 import Details from './details.vue';
-import Media from './media.vue';
+import Banner from './banner.vue';
 import Album from '../album/album.vue';
 import Tags from './tags.vue';
 import Clips from './clips.vue';
@@ -226,7 +228,7 @@ export default {
 		Actor,
 		Album,
 		Details,
-		Media,
+		Banner,
 		Scroll,
 		Releases,
 		Clips,