Improved editor list display

styles/grid.scarlet

@@ -5,8 +5,9 @@ mixin grid
 mixin grid-cell
 	position relative
 
-	width 142px
-	height 200px
+	width anime-image-medium-width
+	height anime-image-medium-height
+	max-width anime-image-medium-width
 	// min-width 90px
 	// min-height 127px
 	border-radius 3px

styles/include/config.scarlet

@@ -101,6 +101,15 @@ const content-line-height = 1.7em
 const typography-margin = 0.4rem
 
 // Sizes
+const anime-image-tiny-width = 39px
+const anime-image-tiny-height = 39px
+
+const anime-image-small-width = 55px
+const anime-image-small-height = 78px
+
+const anime-image-medium-width = 142px
+const anime-image-medium-height = 200px
+
 const anime-image-large-width = 250px
 const anime-image-large-height = 350px
 

styles/include/mixins.scarlet

@@ -63,16 +63,22 @@ mixin anime-generic-item-image
 		filter saturate(1.3)
 
 mixin anime-mini-item-image
-	width 55px !important
-	height 78px !important
+	width anime-image-small-width !important
+	height anime-image-small-height !important
 	anime-generic-item-image
 
+	// Make it easier for the browser to layout by specifying max-width as well
+	max-width anime-image-small-width
+
 mixin anime-list-item-image
-	width 39px
-	height 39px
+	width anime-image-tiny-width
+	height anime-image-tiny-height
 	border-radius 2px
 	object-fit cover
 
+	// Make it easier for the browser to layout by specifying max-width as well
+	max-width anime-image-tiny-width
+
 mixin sidebar
 	vertical
 	margin-left 0