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

components/actors/tile.vue

@@ -27,6 +27,7 @@
 
 				<span
 					v-if="actor.ageThen && actor.ageThen < actor.ageFromBirth"
+					title="Age on date of release"
 					class="age age-then"
 				>{{ actor.ageThen }}</span>
 			</span>
@@ -139,7 +140,8 @@ defineProps({
 }
 
 .age-then {
-	color: var(--shadow-weak-10);
+	color: var(--grey-light-20);
+	font-weight: normal;
 }
 
 .country {

components/footer/navigation.vue

@@ -102,7 +102,7 @@ const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
 	border-radius: 1.5rem;
 }
 
-@media(--small-50) {
+@media(--small-60) {
 	.nav-item.channels {
 		display: none;
 	}

components/header/header.vue

@@ -80,7 +80,10 @@
 				:triggers="['click']"
 				:prevent-overflow="true"
 			>
-				<div class="userpanel">
+				<div
+					class="userpanel"
+					:class="{ searching: searchFocused }"
+				>
 					<img
 						:src="user.avatar"
 						class="avatar"
@@ -130,6 +133,7 @@
 			<div
 				v-else-if="allowLogin"
 				class="userpanel"
+				:class="{ searching: searchFocused }"
 			>
 				<a
 					:href="`/login?r=${encodeURIComponent(currentPath)}`"
@@ -224,6 +228,7 @@ async function logout() {
 	height: 100%;
 	display: flex;
 	align-items: center;
+	margin-left: .5rem;
 }
 
 .search {
@@ -353,16 +358,6 @@ async function logout() {
 }
 
 @media(--small) {
-	.search .input {
-		width: 12rem;
-	}
-}
-
-@media(--small-10) {
-	.nav-list {
-		display: none;
-	}
-
 	.header-section {
 		flex-grow: 1;
 	}
@@ -376,12 +371,9 @@ async function logout() {
 		flex-grow: 1;
 	}
 
-	.logo {
-		margin-right: .75rem;
-	}
-
-	.userpanel {
-		padding-left: 1rem;
+	.userpanel.searching {
+		padding: 0 0 0 1rem;
+		width: 0;
 	}
 
 	.login-text {
@@ -392,4 +384,18 @@ async function logout() {
 		display: block;
 	}
 }
+
+@media(--small-10) {
+	.nav-list {
+		display: none;
+	}
+
+	.logo {
+		margin-right: .75rem;
+	}
+
+	.userpanel {
+		padding-left: 1rem;
+	}
+}
 </style>

components/pagination/pagination.vue

@@ -276,4 +276,15 @@ function getPath(page) {
 	color: var(--shadow-strong-10);
 	font-size: 1.1rem;
 }
+
+@media (--small-30) {
+	.pagination {
+		height: 4.5rem;
+	}
+
+	.page {
+		width: 2rem;
+		height: 2.5rem;
+	}
+}
 </style>

components/scenes/scenes.vue

@@ -57,7 +57,7 @@
 						v-if="pageStash"
 						:selected="scope === 'stashed'"
 						value="stashed"
-					>Stashed</option>
+					>Added</option>
 
 					<option
 						v-if="filters.search"
@@ -299,14 +299,14 @@ function updateFilter(prop, value, reload = true) {
 .scenes {
 	display: grid;
     grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-	gap: .75rem .5rem;
+	gap: .5rem;
 	padding: .5rem 1rem 1rem 1rem;
 }
 
 .scopes {
 	display: flex;
 	gap: .5rem;
-	margin: .75rem 0 .25rem 1rem;
+	padding: .75rem 0 .25rem 1rem;
 }
 
 .scope {
@@ -353,6 +353,8 @@ function updateFilter(prop, value, reload = true) {
 @media(--small-20) {
 	.scenes {
 		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+		padding: .5rem .5rem 1rem .5rem;
+		gap: .5rem .25rem;
 	}
 }
 </style>