Fix column/button alignment problems on source start page

[rmol]

Status

Ready for review

Description of Changes

Fixes #4891.

Certain combinations of language and viewport size could result in the two columns on the source start page not lining up with each other. This changes the columns' justify-content property to push the top and bottom containers apart, and controls the borders and content of the buttons to align them better.

Testing

Run make dev and visit the source interface start page. Use the language chooser to confirm that the columns' contents are always in alignment. The header and explanatory text should always start at the top of the column. The buttons should always align at the bottom, and stay the same height.

Resize the browser window, reducing the width until you force a vertical layout. At no point in the horizontal layout should the button text wrap, causing the buttons' heights to differ, nor should the column headings ever appear at different vertical positions (they may wrap).

Deployment

This only affects the UI.

Checklist

If you made changes to the server application code:

• Linting (make lint) and tests (make test) pass in the development container

If you made non-trivial code changes:

• I have written a test plan and validated it for this PR

[eloquence]

Thanks @rmol, I think we introduced this regression when we were making final tweaks to the spacing. Flagging the spacing changes this PR would introduce (in the English index page) for visibility to @ninavizz:

Before:

After:

[ninavizz]

Mmh... not ok with the buttons being that far away from the body blabs. I realize it's only a 5-10px difference between the before and after, but that's just enough to have the buttons start to feel disconnected from the texts above them. If that could be rectified, I'd be most pleased with the PR, otherwise. :)

[rmol]

@ninavizz How's this?

[eloquence]

LGTM :)

Before

After

Mobile views

Click to expand

Before

After

[kushaldas]

This looks good. Approved.