Use a TailwindCSS managed class to centralize layout styling

[danieldietrich]

Description

This PR performs a minimal change which would help a customer to integrate Gitpod Self Hosted more tightly. 🙏
In particular, this PR introduces a CSS class .app-container to solve the following aspects:

• remove redundant style (good for Gitpod)
• ability to integrate Gitpod in their product without the need of many customizations (good for Gitpod Self Hosted users) /cc @mrsimonemms

Please let me know if you prefer a different class name.

/assign @AlexTugarev

Related Issue(s)

How to test

Open this branch in a test environment and observe that the changed React components (see changed files) look like before (in the sense that the padding of the components is the same).

The overall risk of breaking something is nearly zero. If the styling works for one component (e.g. the header / menu), it will work for all components where the redundant style/string was replaced.

Release Notes

NONE

Documentation

[JanKoehnlein]

/lgtm

[roboquat]

LGTM label has been added.

Git tree hash: 2136cc4afb558587a52cc35fda85166a43a54c71

[JanKoehnlein]

/approve no-issue

[roboquat]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: JanKoehnlein

Associated issue requirement bypassed by: JanKoehnlein

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• components/dashboard/OWNERS [JanKoehnlein]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[gtsiolis]

/werft run

👍 started the job as gitpod-build-dd-central-layout-fork.0

[danieldietrich]

Thank you!

[gtsiolis]

Thanks for another great contribution @danieldietrich! 🧡

FYI, we've decided to embrace utility classes for the product dashboard and have been trying to avoid using arbitrary class names when possible, preferring duplication over abstraction and extracting pieces into components when needed. 🌬️

Bringing this up as semantics could change in the upcoming releases with changes like #4050, etc. 💡

Cc @jankeromnes @AlexTugarev for visibility. 👀

[danieldietrich]

@gtsiolis thank you for the kind words and also thanks for letting me know! 🧡

This makes all sense to me. Tailwind utility classes are powerful enough, abstraction on the CSS utility level obfuscates things. In fact, I first introduced a new React component for the container layout. It encapsulated the repetition and added another feature that is currently missing: being able to style the background of a container for the full screen width. Currently the padding/margin is first applied before being able to style the background. But that's another story.

I am aware that Gitpod might completely change over time. I am looking forward to see what you are building! 🤩