[ui5-li-custom] Visual glitches

[winterkind]

Bug Description

The vertical alignment of the content of custom list items is out of center. The focus outline overlaps with the content of the custom list item. In the Horizon theme, the border of the mode button is partly cut off.

Expected Behavior

Content of custom list items should be vertically centered, the focus outline should not overlap with content, button borders should be cut off.

Steps to Reproduce

1. Go to example: https://svelte.dev/repl/553cf6728cda465892cb2ffde2354cea?version=3.52.0
2. Wait until all imports are resolved. That can take a while. When it is done, you will see the buttons "Show Lists" and "Switch Theme".
3. Click the button "Show Lists" when it is available. You will see four lists with a combination with compact/cozy layout and standard/custom list items.
4. Note the first two glitches:
   • The content of the custom list items is not vertically centered. In the browser debugger or by setting the focus to the items to the items you will see that it is the content wrapper of the custom list item (a div with class ui5-li-content) that is out of center.
   • When you set the focus on a custom list item, you will see that the focus outline overlaps with the content on the left side. That is visible in the Fiori 3 theme but more easily visible in Horizon. You can use the button "Switch Theme" to switch between both themes.
5. Use the button "Switch Theme" to switch to the Horizon theme. Note the third glitch: when you hover over a button at the end of the custom list item, the right border of that button is cut off. We used the standard "Delete" mode button of the lists to demonstrate that this is not a problem with the custom content.

Isolated Example

See above, step 1.

Context

• UI5 Web Components version: 1.8
• OS/Platform: Win 10
• Browser: Chrome (latest)
• Affected component: ui5-li-custom

Priority

• Low
• Medium
• High
• Very High