Merge pull request #935 from bjarnef/feature/icon-picker-size

src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts

@@ -94,7 +94,6 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 							`,
 						)}
 					</uui-color-swatches>
-
 					<hr />
 					<uui-scroll-container id="icon-selection">${this.renderIconSelection()}</uui-scroll-container>
 				</div>
@@ -128,7 +127,8 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 					label="${icon}"
 					id="${icon}"
 					@click="${this._changeIcon}"
-					@keyup="${this._changeIcon}"></uui-icon>
+					@keyup="${this._changeIcon}">
+				</uui-icon>
 			`;
 		})}`;
 	}
@@ -167,7 +167,8 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 			#icon-selection {
 				line-height: 0;
 				display: grid;
-				grid-template-columns: repeat(auto-fit, minmax(40px, calc(100% / 8)));
+				grid-template-columns: repeat(auto-fit, minmax(40px, calc((100% / 12) - 10px)));
+				gap: 10px;
 				overflow-y: scroll;
 				max-height: 100%;
 				min-height: 0;
@@ -181,6 +182,7 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 				height: 100%;
 				padding: var(--uui-size-space-3);
 				box-sizing: border-box;
+				cursor: pointer;
 			}
 
 			#icon-selection .icon-container {
@@ -198,7 +200,7 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 			}
 
 			uui-color-swatches {
-				margin: -0.75rem;
+				margin: 0;
 			}
 		`,
 	];

src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts

@@ -14,6 +14,6 @@ export const UMB_ICON_PICKER_MODAL = new UmbModalToken<UmbIconPickerModalData, U
 	'Umb.Modal.IconPicker',
 	{
 		type: 'sidebar',
-		size: 'small',
+		size: 'medium',
 	},
 );