search

db-ui / mono

DB UX Design System Monorepo - Provides Design Tokens and components for Web UIs
https://db-ui.github.io/mono/review/main/
Apache License 2.0
35 stars 6 forks source link

Label of DBSwitch is pulled apart #2715

Open bruno-sch opened 1 week ago

bruno-sch commented 1 week ago

Which generators are impacted?

Reproduction case

The DBSwitch component is automatically as wide as the container. This results in a sometimes very large, incorrect distance between the switch button and the label.

This only happens when the parent container is set to display: block or inline. The display error does not occur with display: flex.

Possible cause is the following line of CSS applied to .db-switch itself: justify-content: flex-start;

Example at codesandbox

Expected Behaviour

The label is displayed directly next to the switch itself without unnecessary spacing.

Screenshots

Bildschirmfoto 2024-06-04 um 16 44 07

Browser version

None

Add any other context about the problem here.

No response

mfranzke commented 1 week ago

@bruno-sch the label-element itself is only an inline element – are you referring to a specific framework component, or am I missing something ? Or do you have a test case, out of a JSBin, https://vscode.dev/, etc.?

bruno-sch commented 1 week ago

@mfranzke as this is a css problem, the error should occur in every framework. By label I did not mean the label tag, but the text next to the switch button itself.

Live example: Codesandbox