Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add vertical spacing between buttons when they go over multiple lines #19853

Closed
Glandos opened this issue Nov 22, 2021 · 1 comment · Fixed by matrix-org/matrix-react-sdk#7314
Closed

Add vertical spacing between buttons when they go over multiple lines #19853

Glandos opened this issue Nov 22, 2021 · 1 comment · Fixed by matrix-org/matrix-react-sdk#7314
Labels
A-Room-Settings A-User-Settings good first issue Good for newcomers O-Occasional Affects or can be seen by some users regularly or most users rarely S-Tolerable Low/no impact on users T-Defect

Comments

@Glandos
Copy link
Contributor

Glandos commented Nov 22, 2021

Steps to reproduce

  1. Switch to a language with long text like French
  2. Open the preferences dialog, go to "Security and Privacy"
  3. Scroll down to the encryption section

Outcome

What did you expect?

image

What happened instead?

image

Since buttons have long content, the line is broken, but the top and bottom margins are set on the parent element.
They should be set on each button instead.

This is true in this panel, but also within the dialog to verify your session with the security passphrase:
image

I suspect there are more.

Operating system

Debian/unstable

Browser information

Firefox 94.0

URL for webapp

No response

Application version

Element develop 9746517

Homeserver

matrix.org

Will you send logs?

No
@germain-gg germain-gg changed the title Vertical margin for buttons on the same line is zero Add vertical spacing between buttons when they go over multiple lines Nov 23, 2021
@germain-gg germain-gg added good first issue Good for newcomers O-Occasional Affects or can be seen by some users regularly or most users rarely S-Tolerable Low/no impact on users A-Room-Settings A-User-Settings labels Nov 23, 2021
@twigleingrid
Copy link

Hey hey! I would like to do that!
I would add a display: inline-flex on the parent element of the buttons and then use the gap property for the spacing.

twigleingrid added a commit to twigleingrid/matrix-react-sdk that referenced this issue Dec 9, 2021
@twigleingrid
Add vertical spacing between buttons when they go over multiple lines
e0919e6 
Description:

Fixes the vertical spacing between buttons. This is relevant in
languages with long texts, like French, where the buttons don't
fit on one line.

Fixes element-hq/element-web#19853

Signed-off-by: Ingrid Budau inigiri@posteo.jp
@twigleingrid twigleingrid mentioned this issue Dec 9, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
A-Room-Settings A-User-Settings good first issue Good for newcomers O-Occasional Affects or can be seen by some users regularly or most users rarely S-Tolerable Low/no impact on users T-Defect
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add vertical spacing between buttons when they go over multiple lines twigleingrid/matrix-react-sdk
3 participants
@Glandos @germain-gg @twigleingrid