From f1c3e68fcad2bdeaac57a892a97d76e9d25bae75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <jmj@umbraco.dk>
Date: Tue, 23 Aug 2022 12:22:00 +0200
Subject: [PATCH] now uses css grid

---
 .../components/icon-selector.element.ts           | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts
index 4783f02d1b..da60e3ac90 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts
@@ -77,20 +77,17 @@ class UmbIconSelector extends UmbModalLayoutElement<UmbModalContentPickerData> {
 
 			#icon-selection {
 				line-height: 0;
-				position: relative;
-				max-height: 80%;
-				font-size: 20px;
-				display: flex;
-				flex-wrap: wrap;
-				justify-content: space-between;
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(40px, auto));
 			}
 
 			#icon-selection .icon {
-				margin: 1px;
 				display: inline-block;
-				border: 1px solid transparent;
 				border-radius: 2px;
-				padding: 10px;
+				width: 100%;
+				height: 100%;
+				padding: 8px;
+				box-sizing: border-box;
 			}
 
 			#icon-selection .icon-container {