Fixed album title overflow.

assets/components/album/album.vue

@@ -72,16 +72,16 @@ export default {
 }
 
 .album-title {
-	display: flex;
+	display: block;
 	flex-grow: 1;
 	align-items: center;
-	justify-content: center;
+	padding: 1rem;
-	padding: .5rem 1rem;
 	margin: 0;
 	color: var(--text-light);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	text-align: center;
 }
 
 .close {

assets/components/releases/banner.vue

@@ -1,108 +1,110 @@
 <template>
-	<div
+	<div class="media-container">
-		class="media"
-		:class="{ center: release.photos.length < 2 }"
-	>
 		<div
-			v-if="release.trailer || release.teaser"
+			class="media"
-			class="trailer-container"
+			:class="{ center: release.photos.length < 2 }"
 		>
-			<video
+			<div
-				v-if="release.trailer"
+				v-if="release.trailer || release.teaser"
-				:src="`/media/${release.trailer.path}`"
+				class="trailer-container"
-				:poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
-				:alt="release.title"
-				:class="{ sfw: sfw && paused }"
-				class="item trailer"
-				controls
-				@playing="playing = true; paused = false;"
-				@pause="playing = false; paused = true;"
-			>Sorry, the tailer cannot be played in your browser</video>
-
-			<video
-				v-else-if="release.teaser && /^video\//.test(release.teaser.mime)"
-				:src="`/media/${release.teaser.path}`"
-				:poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
-				:alt="release.title"
-				:class="{ sfw: sfw && paused }"
-				class="item trailer"
-				controls
-				@playing="playing = true; paused = false;"
-				@pause="playing = false; paused = true;"
-			>Sorry, the tailer cannot be played in your browser</video>
-
-			<img
-				v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
-				:src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
-				:alt="release.title"
-				loading="lazy"
-				class="item trailer"
 			>
+				<video
+					v-if="release.trailer"
+					:src="`/media/${release.trailer.path}`"
+					:poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
+					:alt="release.title"
+					:class="{ sfw: sfw && paused }"
+					class="item trailer"
+					controls
+					@playing="playing = true; paused = false;"
+					@pause="playing = false; paused = true;"
+				>Sorry, the tailer cannot be played in your browser</video>
 
-			<a
+				<video
-				v-if="release.poster"
+					v-else-if="release.teaser && /^video\//.test(release.teaser.mime)"
-				v-tooltip="'View poster'"
+					:src="`/media/${release.teaser.path}`"
-				:href="`/media/${release.poster.path}`"
+					:poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
-				:class="{ playing }"
+					:alt="release.title"
-				target="_blank"
+					:class="{ sfw: sfw && paused }"
-				rel="noopener noreferrer"
+					class="item trailer"
-				class="poster-link"
+					controls
-			><Icon icon="image" /></a>
+					@playing="playing = true; paused = false;"
+					@pause="playing = false; paused = true;"
+				>Sorry, the tailer cannot be played in your browser</video>
 
-			<span
-				v-if="sfw && !playing"
-				class="warning"
-			>
-				<Icon icon="warning2" />NSFW
-			</span>
-		</div>
-
-		<template v-if="release.covers && release.covers.length > 0">
-			<a
-				v-for="cover in release.covers"
-				:key="`cover-${cover.id}`"
-				:href="`/media/${cover.path}`"
-				target="_blank"
-				rel="noopener noreferrer"
-			>
 				<img
-					:src="`/media/${cover.thumbnail}`"
+					v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
-					:style="{ 'background-image': sfw ? `url(/media/${cover.sfw.lazy})` : `url(/media/${cover.lazy})` }"
+					:src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
-					class="item cover"
+					:alt="release.title"
 					loading="lazy"
-					@load="$emit('load', $event)"
+					class="item trailer"
 				>
-			</a>
-		</template>
 
-		<div
+				<a
-			v-for="photo in photos"
+					v-if="release.poster"
-			:key="`media-${photo.id}`"
+					v-tooltip="'View poster'"
-			class="item-container"
+					:href="`/media/${release.poster.path}`"
-		>
+					:class="{ playing }"
-			<a
+					target="_blank"
-				:href="`/media/${photo.path}`"
+					rel="noopener noreferrer"
-				:class="{ sfw }"
+					class="poster-link"
-				class="item-link"
+				><Icon icon="image" /></a>
-				target="_blank"
-				rel="noopener noreferrer"
-			>
-				<img
-					:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
-					:style="{ 'background-image': sfw ? `url(/img/${photo.sfw.lazy})` : `url(/media/${photo.lazy})` }"
-					:alt="`Photo ${photo.index + 1}`"
-					loading="lazy"
-					class="item"
-					@load="$emit('load', $event)"
-				>
 
 				<span
-					v-if="sfw"
+					v-if="sfw && !playing"
 					class="warning"
 				>
 					<Icon icon="warning2" />NSFW
 				</span>
-			</a>
+			</div>
+
+			<template v-if="release.covers && release.covers.length > 0">
+				<a
+					v-for="cover in release.covers"
+					:key="`cover-${cover.id}`"
+					:href="`/media/${cover.path}`"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<img
+						:src="`/media/${cover.thumbnail}`"
+						:style="{ 'background-image': sfw ? `url(/media/${cover.sfw.lazy})` : `url(/media/${cover.lazy})` }"
+						class="item cover"
+						loading="lazy"
+						@load="$emit('load', $event)"
+					>
+				</a>
+			</template>
+
+			<div
+				v-for="photo in photos"
+				:key="`media-${photo.id}`"
+				class="item-container"
+			>
+				<a
+					:href="`/media/${photo.path}`"
+					:class="{ sfw }"
+					class="item-link"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<img
+						:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
+						:style="{ 'background-image': sfw ? `url(/img/${photo.sfw.lazy})` : `url(/media/${photo.lazy})` }"
+						:alt="`Photo ${photo.index + 1}`"
+						loading="lazy"
+						class="item"
+						@load="$emit('load', $event)"
+					>
+
+					<span
+						v-if="sfw"
+						class="warning"
+					>
+						<Icon icon="warning2" />NSFW
+					</span>
+				</a>
+			</div>
 		</div>
 	</div>
 </template>
@@ -163,6 +165,10 @@ export default {
 <style lang="scss" scoped>
 @import 'breakpoints';
 
+.media-container {
+	backdrop-filter: blur(1rem);
+}
+
 .media {
     flex-shrink: 0;
     white-space: nowrap;
@@ -171,6 +177,7 @@ export default {
 
 .media.center {
 	width: 1200px;
+	max-width: 100%;
 	margin: 0 auto;
 }
 

assets/components/releases/release.vue

@@ -5,7 +5,8 @@
 	>
 		<Scroll
 			v-slot="slotProps"
-			class="scroll-light"
+			class="scroll-light banner"
+			:style="{ 'background-image': `url(/media/${release.poster.thumbnail})` }"
 			:expandable="false"
 		>
 			<Banner
@@ -259,6 +260,11 @@ export default {
 	border-bottom: solid 1px var(--shadow-hint);
 }
 
+.banner {
+	background-position: center;
+	background-size: cover;
+}
+
 .info {
     padding: 1rem;
     border-left: solid 1px var(--shadow-hint);

assets/components/scroll/scroll.vue

@@ -24,7 +24,7 @@
 
 			<div
 				ref="content"
-				class="content"
+				class="scroll-content"
 			>
 				<slot :loaded="loaded" />
 			</div>
@@ -145,7 +145,7 @@ export default {
 	position: relative;
 }
 
-.content {
+.scroll-content {
 	overflow-x: scroll;
 	scroll-behavior: smooth;
 	scrollbar-width: none;

package-lock.json

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

package.json

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