Change #1026966 had a related patch set uploaded (by Urbanecm; author: Catrope):

[mediawiki/extensions/CommunityConfiguration@master] Remove unnecessary wrapper divs

https://gerrit.wikimedia.org/r/1026966

Change #1028787 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/CommunityConfiguration@master] Dashboard: fix some spacing issues

https://gerrit.wikimedia.org/r/1028787

The form specification is achieved thanks to Roan's patch which fixed a miss-use of the Codex fields. The issue was preventing the default Codex spacing rules to apply so now that's fixed. Regarding the Dashboard specification I updated the Guideline and Feature boxes to comply with the specified spacing. However the specified spacing for headings requires overwriting default MW and skin (Vector) styles. Is that intentional or we can rely on the MW default and skin spacing rules?

Change #1026966 merged by jenkins-bot:

[mediawiki/extensions/CommunityConfiguration@master] Remove unnecessary wrapper divs

https://gerrit.wikimedia.org/r/1026966

Change #1028787 merged by jenkins-bot:

[mediawiki/extensions/CommunityConfiguration@master] Dashboard: update horizontal spacing

https://gerrit.wikimedia.org/r/1028787

@JFernandez-WMF - please review the following. Also, it could be that I didn't measure the spacing quite correctly. To the screenshots from eswiki beta I added only the spacing that seemed incorrect to me.

When the Tools menu is collapsed, the page would have an additional space - not sure if it should be considered in the design.

Spacing for dashboard

Task description screenshot	eswiki beta

Spacing for forms

• Spacing between elements of a form should be 16px (spacing-100 token)
• Spacing between a label and its respective field should be 4px (spacing-25 token)

Task description screenshot	eswiki beta

• we don't yet have forms with additional sections

Thanks, @Etonkovidova!

I am getting different spacings using Chrome's inspect/Developer tools:

Spacing for dashboard

The one thing I am not seeing is accurate is the 'Learn more' and 'Send feedback' pieces. I tried editing the spacing in the Developer tools. Here's the ideal spacing:

• Top, bottom, left, and right padding should be 12px. Right now left and right are correct, but I think top and bottom are slightly off. Bottom for example is measuring 7px.
• Spacing between, for example, 'Learn more' and the body text should be of 4px. At the moment it looks like there is a bottom margin in 'Learn more' of 3.500 px plus a top margin in the body text of 7px.

Current	Ideal

The difference is very minor as you can see, so I am fine with re-visiting this later on if we want to focus on other stuff. @KStoller-WMF what do you think?

Spacing for forms

I am getting the correct spacing (16px) for in-between elements and 4px for a label and its field. See screenshots:

In T364028#9861194, @JFernandez-WMF wrote:

The difference is very minor as you can see, so I am fine with re-visiting this later on if we want to focus on other stuff. @KStoller-WMF what do you think?

@JFernandez-WMF If you think it's worth pursing further spacing improvements, will you create a separate task for that work?
I prefer for engineers to focus on release blocking tasks and revisit this later if needed. Thanks!