0.10.7

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;
 	}
 

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "traxxx-web",
-  "version": "0.10.6",
+  "version": "0.10.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "0.10.6",
+      "version": "0.10.7",
       "dependencies": {
         "@brillout/json-serializer": "^0.5.8",
         "@dicebear/collection": "^7.0.5",

package.json

@@ -70,5 +70,5 @@
     "postcss-custom-media": "^10.0.2",
     "postcss-nesting": "^12.0.2"
   },
-  "version": "0.10.6"
+  "version": "0.10.7"
 }

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>