wrap long template/imageselect with scroll

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;
@@ -329,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;

schilder2000/templates/schild.html.j2

@@ -57,7 +57,7 @@
 									checked
 								{%- endif -%}
 							/>
-							<label for="img:{{ img }}" class="option-border">
+							<label for="img:{{ img }}" class="option-border icon-container">
 								<img src="{{ url_for('instance.static', filename='img/'+img) }}" title="{{ img }}" />
 							</label>
 						</div>