assets/components/album/album.vue

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

@@ -1,8 +1,5 @@
 <template>
-	<div
+	<div class="media">
-		class="media"
-		:class="{ center: release.photos.length < 2 }"
-	>
 		<div
 			v-if="release.trailer || release.teaser"
 			class="trailer-container"
@@ -164,16 +161,12 @@ 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;
@@ -245,7 +238,6 @@ export default {
 
 .item {
 	max-width: 100%;
-	height: 18rem;
 	box-shadow: 0 0 3px var(--shadow-weak);
 	background-size: cover;
 }
@@ -277,7 +269,23 @@ 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,9 +8,8 @@
 			class="scroll-light"
 			:expandable="false"
 		>
-			<Banner
+			<Media
 				:release="release"
-				class="media"
 				@load="slotProps.loaded"
 			/>
 		</Scroll>
@@ -18,7 +17,6 @@
 		<Details :release="release" />
 
 		<button
-			v-if="release.photos.length > 0"
 			class="album-toggle"
 			@click="showAlbum = true"
 		><Icon icon="grid3" />View album</button>
@@ -199,7 +197,7 @@
 
 <script>
 import Details from './details.vue';
-import Banner from './banner.vue';
+import Media from './media.vue';
 import Album from '../album/album.vue';
 import Tags from './tags.vue';
 import Clips from './clips.vue';
@@ -228,7 +226,7 @@ export default {
 		Actor,
 		Album,
 		Details,
-		Banner,
+		Media,
 		Scroll,
 		Releases,
 		Clips,

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "traxxx",
-    "version": "1.159.1",
+    "version": "1.159.0",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "traxxx",
-    "version": "1.159.1",
+    "version": "1.159.0",
     "description": "All the latest porn releases in one place",
     "main": "src/app.js",
     "scripts": {