Fixed actors and movies pagination scroll.

assets/components/actors/actors.vue

@@ -237,7 +237,10 @@
 			<SearchBar :placeholder="`Search ${totalCount} actors`" />
 		</nav>
 
-		<div class="tiles">
+		<div
+			ref="tiles"
+			class="tiles"
+		>
 			<Actor
 				v-for="actor in actors"
 				:key="`actor-${actor.id}`"
@@ -325,8 +328,7 @@ async function fetchActors(scroll) {
 	this.topCountries = [...(this.country && !topCountries.includes(this.country) ? [this.country] : []), ...topCountries].map(alpha2 => countriesByAlpha2[alpha2]);
 
 	if (scroll) {
-		this.$refs.content.scrollTop = 0;
-		// this.$refs.filter?.scrollIntoView();
+		this.$refs.tiles?.scrollIntoView();
 	}
 }
 
@@ -440,6 +442,7 @@ export default {
     display: flex;
     flex-direction: column;
 	flex-grow: 1;
+	overflow-y: auto;
 }
 
 .tiles {

assets/components/releases/movies.vue

@@ -3,7 +3,10 @@
 		<div class="content-inner">
 			<SearchBar :placeholder="`Search ${totalCount} movies`" />
 
-			<div class="tiles">
+			<div
+				ref="tiles"
+				class="tiles"
+			>
 				<MovieTile
 					v-for="movie in movies"
 					:key="`movie-${movie.id}`"
@@ -42,6 +45,8 @@ async function fetchMovies() {
 
 	this.movies = movies;
 	this.totalCount = totalCount;
+
+	this.$refs.tiles.scrollIntoView();
 }
 
 async function searchMovies() {
@@ -71,7 +76,7 @@ export default {
 		return {
 			movies: [],
 			totalCount: 0,
-			limit: 30,
+			limit: 5,
 		};
 	},
 	watch: {
@@ -99,14 +104,14 @@ export default {
 }
 
 .search {
-	margin: 1rem 0;
+	margin: 1rem 0 0 0;
 }
 
 .tiles {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
 	grid-gap: 1rem;
-	margin: 0 0 1rem 0;
+	padding: 1rem 0;
 }
 
 @media(max-width: $breakpoint-kilo) {