Bugfix: TinyMCE toolbar config layout (#2387)

Fixes TinyMCE toolbar config layout

Corrects duplicated "justify" label

Author: leekelleher

src/packages/rte/tiny-mce/property-editors/tiny-mce/manifests.ts

@@ -46,7 +46,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 									{ alias: 'alignleft', label: 'Align left', icon: 'align-left' },
 									{ alias: 'aligncenter', label: 'Align center', icon: 'align-center' },
 									{ alias: 'alignright', label: 'Align right', icon: 'align-right' },
-									{ alias: 'alignjustify', label: 'Justify justify', icon: 'align-justify' },
+									{ alias: 'alignjustify', label: 'Align justify', icon: 'align-justify' },
 									{ alias: 'bullist', label: 'Bullet list', icon: 'unordered-list' },
 									{ alias: 'numlist', label: 'Numbered list', icon: 'ordered-list' },
 									{ alias: 'outdent', label: 'Outdent', icon: 'outdent' },

src/packages/rte/tiny-mce/property-editors/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element.ts

@@ -114,17 +114,17 @@ export class UmbPropertyEditorUITinyMceToolbarConfigurationElement
 
 	override render() {
 		return html`<ul>
-			${repeat(
-				this._toolbarConfig,
-				(v) => v.alias,
+				${repeat(
+					this._toolbarConfig,
+					(v) => v.alias,
 				(v) =>
 					html`<li>
-						<uui-checkbox label=${v.label} value=${v.alias} ?checked=${v.selected} @change=${this.onChange}>
-							<uui-icon .svg=${tinyIconSet?.icons[v.icon ?? 'alignjustify']}></uui-icon>
+							<uui-checkbox label=${v.label} value=${v.alias} ?checked=${v.selected} @change=${this.onChange}>
+								<uui-icon .svg=${tinyIconSet?.icons[v.icon ?? 'alignjustify']}></uui-icon>
 							${v.label}
-						</uui-checkbox>
+							</uui-checkbox>
 					</li>`,
-			)}
+				)}
 		</ul>`;
 	}
 
@@ -135,6 +135,12 @@ export class UmbPropertyEditorUITinyMceToolbarConfigurationElement
 				list-style: none;
 				padding: 0;
 				margin: 0;
+
+				uui-icon {
+					width: 1.5em;
+					height: 1.5em;
+					margin-right: 5px;
+				}
 			}
 		`,
 	];