Using query instead of parameters for tag filter URI. Added generic scrolling component, using for actor photos and entity children. Removed pagination from filter bar.

assets/components/actors/actor.vue

@@ -283,10 +283,19 @@
 			</div>
 
 			<div class="actor-content">
-				<Photos
+				<Scroll
 					v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
-					:actor="actor"
-				/>
+					class="scroll-light"
+				>
+					<Photos :actor="actor" />
+
+					<template v-slot:expanded>
+						<Photos
+							class="expanded"
+							:actor="actor"
+						/>
+					</template>
+				</Scroll>
 
 				<FilterBar
 					:fetch-releases="fetchActor"
@@ -307,10 +316,11 @@
 </template>
 
 <script>
-import Photos from './photos.vue';
 import Pagination from '../pagination/pagination.vue';
 import FilterBar from '../header/filter-bar.vue';
 import Releases from '../releases/releases.vue';
+import Photos from './photos.vue';
+import Scroll from '../scroll/scroll.vue';
 import Gender from './gender.vue';
 import Social from './social.vue';
 
@@ -348,6 +358,7 @@ export default {
 		FilterBar,
 		Pagination,
 		Photos,
+		Scroll,
 		Releases,
 		Gender,
 		Social,
@@ -637,9 +648,62 @@ export default {
     display: none;
 }
 
-.expand,
-.collapse-header {
+.expand {
     display: none;
+    justify-content: center;
+    align-items: center;
+    padding: .5rem .25rem;
+    font-weight: bold;
+    font-size: .9rem;
+    cursor: pointer;
+
+    .icon {
+        fill: $shadow;
+    }
+
+    &:hover {
+        background: $shadow-hint;
+
+        .icon {
+            fill: $shadow-strong;
+        }
+    }
+}
+
+.expand-sidebar:hover {
+    background: $shadow-hint;
+}
+
+.expand-header {
+    display: none;
+
+    &:hover {
+        background: $shadow-hint;
+    }
+}
+
+.collapse-header {
+	display: none;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    background: $profile;
+
+    .icon {
+        width: 100%;
+        fill: $highlight;
+        padding: .5rem 0;
+    }
+
+    &:hover .icon {
+        background: $highlight-hint;
+        fill: $text-contrast;
+    }
+}
+
+.scroll {
+	border-bottom: solid 1px var(--shadow-hint);
 }
 
 @media(max-width: $breakpoint4) {