[JENKINS-56398] Mobile friendly login / load / restart screens

[zbynek]

See JENKINS-56398.

Proposed changelog entries

• Mobile friendly layout of the login, loading and restart screens

Submitter checklist

• JIRA issue is well described
• Changelog entry appropriate for the audience affected by the change (users or developer, depending on the change). Examples
  * Use the Internal: prefix if the change has no user-visible impact (API, test frameworks, etc.)
• [n/a] Appropriate autotests or explanation to why this change has no tests
• [n/a] For dependency updates: links to external changelogs and, if possible, full diffs

Note: the padding change makes no difference for login, but looks slightly better for restart.

Login before

Login after

Restart before

Restart after

[alecharp]

Thank you for your contribution. Could you please include a pre and post fix screenshot on a desktop/laptop screen size? This way, anyone can see the difference and the impact? Thank you.

[alecharp]

LGTM, with screenshot it will be perfect.

[oleg-nenashev]

Should be ok from what I know about Web UIs and CSS (spoiler: not so much)

[zbynek]

I updated the original comment with screenshots. Looking at the restart-mobile-friendly screenshot again I realized the heading lines were too close to each other. Fixed in second commit, result is below.

@alecharp thanks for reviewing this! You also mentioned desktop screenshots: for desktop browsers this pull makes no difference. All screenshots were taken in Chrome dev tools emulating Pixel 2, I also tried the login on a physical Android 5'' phone.

[scherler]

lgtm

[halkeye]

for desktop browsers this pull makes no difference

There's a padding change, what does that actually do?

[Second Screenshot]

I was going to bring up the squished header, so with that fixed, I'm 👍 myself

[daniel-beck]

How does this impact the signup form when having user signup enabled in the Jenkins user database?

[zbynek]

@daniel-beck thanks, good point. Viewport added for signup in the last commit (also required removing min-width)

@halkeye the padding was meant to make sure the text on reload screen does not go too close to vertical borders, but it also affects the current version of signup, so I removed the padding again. Restart is now like this:

I hope the latest version is OK.

[oleg-nenashev]

I think this is ready to go.
Thanks @zbynek !