Spacing on "Help & About" tab seems not right

[luixxiul]

Steps to reproduce

1. Open "Help & About" tab

Outcome

What did you expect?

Sections should be split with spacing, so that elements in them can be perceived as grouped.

What happened instead?

• The gaps between the texts and buttons seem wide, which is almost enough to give perception that buttons are not in the same group as the text above. This is why Keyboard shortcuts button, which is not clear by itself that it belongs to FAQ section, seems a little bit out of order ("Does it belong to FAQ, or is it on the same level as the headers?").
• The gaps between the headers and the rectangle about version information, the list, and Homeserver address seem wide, and it is perceived as if texts to describe the section lacked there.

It is recommended to check on the actual UI since the screenshot above does not express the actual spacing on the monitor.

For comparison, this is a cropped screenshot of the same tab on 1.11.31. Here it is possible to see which items are grouped to which section clearly, though there is not consistency of spacing code-wise.

Operating system

No response

Browser information

No response

URL for webapp

develop.element.io

Application version

No response

Homeserver

No response

Will you send logs?

No

[kerryarchibald]

Spacing is as defined in design
Further design tweaks should be addressed by Compound

[luixxiul]

Spacing is as defined in design

(The design is not public; you need to log in to Figma.)

[weeman1337]

I would say we should just use the same spacing as in the new device manager

„Show QR code“ in the screenshot above.

[manancodes]

Every group has 3 components.
A heading, a description and Content, and description is not present in every group.

Description has a margin top of 8px. (Distance from the heading)
Content has a margin top of 24px. (Distance from heading or description if present)
This is consistent in all the pages with similar components.

Content having a margin of 24px is too much. Using 14px makes things much better. In the image below, 14px is used.

How should I move forward with this?

[manancodes]

@weeman1337 @luixxiul @kerryarchibald Any update on this?