Improved channel and movie scaling. Added scroll handle to filter sidebar.

components/filters/filters.vue

@@ -304,6 +304,12 @@ function toggleFilters(state) {
 	line-height: 1.25;
 	font-size: .9rem;
 }
+
+@media (--compact) {
+	.filter {
+		border-right: solid 1px var(--shadow-weak-30);
+	}
+}
 </style>
 
 <style scoped>
@@ -392,7 +398,7 @@ function toggleFilters(state) {
 	pointer-events: none;
 }
 
-@media (max-width: 1200px) {
+@media (--compact) {
 	.filters-container {
 		display: none;
 		height: 100%;
@@ -409,6 +415,8 @@ function toggleFilters(state) {
 	}
 
 	.filters {
+		width: 20rem;
+		border-right: solid 1.5rem var(--background);
 		overflow-y: auto;
 	}
 

pages/actors/+Page.vue

@@ -261,4 +261,10 @@ function updateFilter(prop, value, reload = true) {
 	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
 	gap: .25rem;
 }
+
+@media(--small-40) {
+	.actors {
+		grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
+	}
+}
 </style>

pages/entities/+Page.vue

@@ -122,4 +122,16 @@ const sections = [
 	width: 100%;
 	object-fit: contain;
 }
+
+@media(--small-30) {
+	.networks {
+		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+	}
+}
+
+@media(--small-50) {
+	.networks {
+		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+	}
+}
 </style>

pages/movies/+Page.vue

@@ -461,4 +461,10 @@ function updateFilter(prop, value, reload = true) {
 		grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
 	}
 }
+
+@media(--small-50) {
+	.movies {
+		grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+	}
+}
 </style>