Scrolling

frontend/src/main.less

@@ -269,11 +269,6 @@ main {
 			place-self: center;
 		}
 
-		img {
-			width: 10rem;
-			background-color: #fff;
-		}
-
 		.option-border {
 			border: @option_border solid var(--fg-dark);
 			border-radius: 3 * @option_border;
@@ -291,6 +286,11 @@ main {
 			}
 		}
 
+		// somehow there is some padding at the bottom with inline or block
+		label.option-border {
+			display: flex;
+		}
+
 		&:hover .option-border {
 			border-color: var(--accent2);
 		}
@@ -324,6 +324,34 @@ main {
 	}
 }
 
+.templateselect {
+	overflow: scroll;
+	// a row is roughly 15rem
+	max-height: 40rem;
+}
+
+.imageselect {
+	overflow: scroll;
+	// a row is roughly 10rem
+	max-height: 25rem;
+}
+
+.icon-container {
+	width: 10rem;
+	height: 10rem;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	img {
+		background-color: #fff;
+
+		max-width: 100%;
+		max-height: 100%;
+	}
+}
+
 .flash {
 	border: 1px solid transparent;
 	border-radius: 4px;