fix(ui5-button, ui5-split-button): align menu button items on the left

Updates the SplitButton styling so the content of the left (text) button is left-aligned. The change ensures the start icon + label are anchored to the left edge of the text segment, while the arrow segment remains pinned to the right. This prevents long labels from appearing centered (or shifting the arrow), enables truncation with ellipsis, and improves visual consistency. The same behaviour is applied to the ui5-button when it is used as menu button.

Author: GDamyanov

packages/main/src/themes/Button.css

@@ -376,3 +376,15 @@ bdi {
 	width: 100%;
 	top:0;
 }
+
+:host([has-end-icon]) .ui5-button-root {
+	justify-content: flex-start;
+}
+
+:host([icon-only]) .ui5-button-root {
+	justify-content: center;
+}
+
+:host([has-end-icon]) .ui5-button-end-icon {
+	margin-left: auto;
+}

packages/main/src/themes/SplitButton.css

@@ -388,3 +388,8 @@
 :host([design="Attention"]) .ui5-split-text-button[active] + .ui5-split-arrow-button::before {
 	background-color: var(--_ui5_split_button_attention_separator_color);
 }
+
+.ui5-split-text-button::part(button) {
+    justify-content: flex-start;
+	padding: 0 var(--_ui5_button_base_padding);
+}

packages/main/test/pages/Button.html

@@ -286,13 +286,19 @@
 	<ui5-button id="menuButtonTextIcon" icon="action-settings" end-icon="navigation-down-arrow">Menu Button</ui5-button>
 	<ui5-button id="menuButtonIconEnd" end-icon="navigation-down-arrow"
 		tooltip="Menu Button with End Icon only"></ui5-button>
-
 	<ui5-menu id="menu">
 		<ui5-menu-item text="Item 1"></ui5-menu-item>
 		<ui5-menu-item text="Item 2"></ui5-menu-item>
 		<ui5-menu-item text="Item 3"></ui5-menu-item>
 	</ui5-menu>
 
+	<br />
+	<br />
+	<ui5-title>Menu Buttons with fixed width</ui5-title>
+	<br />
+	<ui5-button end-icon="navigation-down-arrow" class="medium-button">Menu Button</ui5-button>
+	<ui5-button icon="action-settings" end-icon="navigation-down-arrow" class="medium-button"></ui5-button>
+	<ui5-button icon="action-settings" end-icon="navigation-down-arrow" class="medium-button">Menu Button</ui5-button>
 	<br />
 	<br />
 

packages/main/test/pages/SplitButton.html

@@ -85,7 +85,7 @@ <h3>Test textContent</h3>
 	<ui5-split-button id="emptySpBtn" design="Default"></ui5-split-button>
 	<ui5-split-button id="defaultSpBtn" design="Default">Default</ui5-split-button>
 
-	<ui5-split-button id="splitBtnWithMenuDefaultActionDefaultAction">openMenu</ui5-split-button>
+	<ui5-split-button id="splitBtnWithMenuDefaultActionDefaultAction" style="width:300px">openMenu</ui5-split-button>
 	<ui5-menu id="menu">
 		<ui5-menu-item text="New File" accessible-name="Opens a file explorer" additional-text="Ctrl+Alt+Shift+N" icon="add-document"></ui5-menu-item>
 		<ui5-menu-item text="New Folder with very long title for a menu item" additional-text="Ctrl+F" icon="add-folder" disabled></ui5-menu-item>
@@ -102,13 +102,18 @@ <h3>Test textContent</h3>
 		<ui5-menu-item text="Save" icon="save"></ui5-menu-item>
 		<ui5-menu-item text="Delete" icon="delete"></ui5-menu-item>
 	</ui5-menu>
+
+	<h3>Split Buttons with fixed width</h3>
+	<ui5-split-button icon="add" style="width:300px">Fixed width</ui5-split-button>
+	<ui5-split-button style="width:300px">Fixed width</ui5-split-button>
+	<ui5-split-button icon="add" style="width:300px"></ui5-split-button>
 </body>
 <script>
 	const splitBtn = document.getElementById("splitBtnWithMenuDefaultActionDefaultAction");
 	const menu = document.getElementById("menu");
 
 	splitBtn.addEventListener("ui5-arrow-click", function() {
-		menu.opener = splitBtn; 
+		menu.opener = splitBtn;
 		menu.open = !menu.open;
 		splitBtn.activeArrowButton = !splitBtn.activeArrowButton;
 	});
@@ -128,7 +133,7 @@ <h3>Test textContent</h3>
 
 
 	splitBtnWithMenuWithAssociatedLastAction.addEventListener("ui5-arrow-click", function() {
-		menuInSplitBtnAssociatedLastAction.opener = splitBtnWithMenuWithAssociatedLastAction; 
+		menuInSplitBtnAssociatedLastAction.opener = splitBtnWithMenuWithAssociatedLastAction;
 		menuInSplitBtnAssociatedLastAction.menuInSplitBtnAssociatedLastAction = !menu.open;
 	})
 

packages/main/test/pages/styles/Button.css

@@ -2,6 +2,10 @@
     width: 1000px;
 }
 
+.medium-button {
+	width: 400px;
+}
+
 .long-button-begin::part(button) {
     justify-content: flex-start;
 }