V16-RC Tiptap style fixes (#19473)

* Fixes search filter text alignment

* Let `styleMenu` kind display as a menu

* Collapse excessive whitespace in RTE

* Ensures the RTE Capabilities are in 3 columns

* Dimensions UI fixes

Author: leekelleher

src/Umbraco.Web.UI.Client/src/packages/property-editors/dimensions/property-editor-ui-dimensions.element.ts

@@ -1,5 +1,4 @@
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
@@ -25,6 +24,9 @@ export class UmbPropertyEditorUIDimensionsElement extends UmbLitElement {
 		return html`
 			<uui-input
 				type="number"
+				autocomplete="off"
+				min="0"
+				step="1"
 				label=${this.localize.term('general_width')}
 				placeholder=${this.localize.term('general_width')}
 				@change=${this.#onChangeWidth}
@@ -33,6 +35,9 @@ export class UmbPropertyEditorUIDimensionsElement extends UmbLitElement {
 			<span>&times;</span>
 			<uui-input
 				type="number"
+				autocomplete="off"
+				min="0"
+				step="1"
 				label=${this.localize.term('general_height')}
 				placeholder=${this.localize.term('general_height')}
 				@change=${this.#onChangeHeight}
@@ -42,7 +47,15 @@ export class UmbPropertyEditorUIDimensionsElement extends UmbLitElement {
 		`;
 	}
 
-	static override readonly styles = [UmbTextStyles];
+	static override readonly styles = [
+		css`
+			:host {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-space-1);
+			}
+		`,
+	];
 }
 
 export { UmbPropertyEditorUIDimensionsElement as element };

src/Umbraco.Web.UI.Client/src/packages/tiptap/components/character-map/character-map-modal.element.ts

@@ -435,10 +435,6 @@ export class UmbCharacterMapModalElement extends UmbModalBaseElement<
 				gap: var(--uui-size-space-4);
 			}
 
-			uui-input {
-				align-items: baseline;
-			}
-
 			uui-scroll-container {
 				height: 300px;
 				width: calc(450px + var(--uui-size-layout-1));

src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts

@@ -286,7 +286,7 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 					height: 100%;
 					width: 100%;
 					outline: none;
-					white-space: pre-wrap;
+					white-space: wrap;
 					min-width: 0;
 
 					p:first-of-type {

src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-extensions-configuration.element.ts

@@ -197,7 +197,7 @@ export class UmbPropertyEditorUiTiptapExtensionsConfigurationElement
 			}
 
 			.group {
-				flex: 1;
+				width: calc((100% - 2rem) / 3);
 
 				ul {
 					list-style: none;

src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-statusbar-configuration.element.ts

@@ -265,10 +265,6 @@ export class UmbPropertyEditorUiTiptapStatusbarConfigurationElement
 				[slot='header-actions'] {
 					margin-bottom: var(--uui-size-2);
 
-					uui-input {
-						align-items: baseline;
-					}
-
 					uui-icon {
 						color: var(--uui-color-border);
 					}

src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-toolbar-configuration.element.ts

@@ -278,6 +278,7 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 		const forbidden = !this.#context?.isExtensionEnabled(item.alias);
 
 		switch (item.kind) {
+			case 'styleMenu':
 			case 'menu':
 				return html`
 					<uui-button
@@ -355,10 +356,6 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 				[slot='header-actions'] {
 					margin-bottom: var(--uui-size-2);
 
-					uui-input {
-						align-items: baseline;
-					}
-
 					uui-icon {
 						color: var(--uui-color-border);
 					}