Bug Description

When input components are placed in any horizontal container, the visible (focus) borders of the components do not line up at the top edges. This creates a visually inconsistent row, as shown in the screenshot below:

For SAPUI5 controls, this doesn't seem to be the case:

	<HBox renderType="Bare">
		<Switch />
		<CheckBox text="Check" />
		<Button text="Button" />
		<Input />
	</HBox>

My findings are based on the "Cozy" content-density mode:

• Input-like components should have a height of 2.75rem
• Button components: Margin missing -> the margin can be added on consumer side
• inputs with input field: The margin should be 0.25rem 0 but is 0.1875rem 0;
• CheckBox, RadioButton, Switch: Focus border doesn't line up with other input components.

If it's easier for you I can also open dedicated issues for component groups, so the responsible teams can easier track this. In this case, please let me know which components I can group together.

Affected Component

input components

Expected Behaviour

All standard input components should line up at the top edge.

Isolated Example

https://stackblitz.com/edit/github-7kedhshx?file=package.json,main.js,index.html

Steps to Reproduce

1. Got to StackBlitz
2. See misalignment

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.15.1

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Organization

SIX Technologies

Declaration

• I’m not disclosing any internal or sensitive information.