Fixed pagination and scene poster overflowing page on small screens. Fixed back reload interfering with tag page hashes.

pages/movies/+Page.vue

@@ -462,6 +462,13 @@ function updateFilter(prop, value, reload = true) {
 	}
 }
 
+@media(--small-20) {
+	.movies {
+		padding: .5rem .5rem 1rem .5rem;
+		gap: .5rem .25rem;
+	}
+}
+
 @media(--small-50) {
 	.movies {
 		grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));

pages/scene/+Page.vue

@@ -149,13 +149,13 @@
 					</li>
 				</ul>
 
-				<div class="section">
+				<div
+					v-if="scene.description"
+					class="section"
+				>
 					<h3 class="heading">Description</h3>
 
-					<p
-						v-if="scene.description"
-						class="description"
-					>{{ scene.description }}</p>
+					<p class="description">{{ scene.description }}</p>
 				</div>
 
 				<div class="section details">
@@ -246,22 +246,30 @@ async function unstash() {
 .banner-container {
 	background-position: center;
 	background-size: cover;
+	border-radius: .5rem .5rem 0 0;
 	margin-top: .5rem;
 }
 
 .banner {
 	max-height: 18rem;
+	border-radius: .5rem .5rem 0 0;
 	display: flex;
 	font-size: 0;
 	backdrop-filter: blur(1rem);
+	overflow: hidden;
+}
+
+.poster-container {
+	padding: .5rem;
+	max-height: 18rem;
 }
 
 .poster {
 	height: auto;
-	max-height: 18rem;
+	max-height: 100%;
 	width: auto;
 	max-width: 100%;
-	border-radius: .25rem .25rem 0 0;
+	border-radius: .5rem;
 }
 
 .poster,
@@ -273,12 +281,12 @@ async function unstash() {
 }
 
 .album {
-	height: 100%;
+	height: auto;
 	flex-grow: 1;
 	display: grid;
     grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
 	gap: .5rem;
-	padding: 0 .5rem .5rem .5rem;
+	padding: .5rem .5rem .5rem 0;
 	overflow-y: auto;
 }
 
@@ -300,7 +308,7 @@ async function unstash() {
 	justify-content: space-between;
 	align-items: center;
 	background: var(--grey-dark-40);
-	border-radius: 0 0 .25rem .25rem;
+	border-radius: 0 0 .5rem .5rem;
 	color: var(--text-light);
 }
 
@@ -444,7 +452,31 @@ async function unstash() {
 	color: var(--shadow);
 }
 
-@media (--compact) {
+@media(--small-10) {
+	.banner-container {
+		border-radius: 0;
+		margin-top: 0;
+	}
+
+	.banner {
+		justify-content: center;
+	}
+
+	.poster-container {
+		padding: 0;
+		border-radius: 0;
+	}
+
+	.poster {
+		border-radius: 0;
+	}
+
+	.album {
+		display: none;
+	}
+}
+
+@media (--small) {
 	.header {
 		flex-direction: column-reverse;
 	}
@@ -455,13 +487,10 @@ async function unstash() {
 		margin-bottom: 1.5rem;
 	}
 
-	.view {
-		flex-direction: row-reverse;
-	}
-
 	.title {
 		width: 100%;
 		margin-left: 1rem;
+		white-space: wrap;
 	}
 
 	.meta {

pages/stashes/@username/+Page.vue

@@ -39,8 +39,6 @@ import Scenes from '#/components/scenes/scenes.vue';
 
 const pageContext = inject('pageContext');
 const stash = pageContext.pageProps.stash;
-
-console.log(stash);
 </script>
 
 <style scoped>

pages/tags/+Page.vue

@@ -120,7 +120,16 @@ onMounted(() => {
 		categories.value.scrollLeft += event.deltaY;
 	});
 
-	content.value.addEventListener('scroll', calculateActiveCategory);
+	content.value.addEventListener('scroll', () => calculateActiveCategory());
+
+	window.addEventListener('popstate', () => {
+		if (window.location.hash) {
+			const categoryTitle = document.querySelector(window.location.hash);
+
+			activeCategory.value = window.location.hash.slice(1);
+			categoryTitle?.scrollIntoView();
+		}
+	});
 
 	calculateActiveCategory();
 });