PageContents cannot be stacked

In order to support the case below, we need two PageContents:

Would require JSX along the lines of

<PageContent areas="main side">
    <Card title={`Job: ${data.name}`}>hi</Card>
    <Card title="Job Executions">I am not gay</Card>
  </PageContent>
<PageContent>
  <Card title="Bundle Events">Hi</Card>
</PageContent>

Except currently, PageContent assumes it will be the only PageContent and takes the entire height of its container, rendering the second PageContent below the fold, under the page, out of immediate sight.

Reproduction

How can we solve this? @fabien0102 @peterszerzo

[peterszerzo]

I agree that these are useful additions, but at the same time, having to do runtime warnings are a sign that the design will difficult to take in and maintain by a new developer, or even one seasoned with this codebase. This project has evolved in a manner that prefers compile-time safety and strict API’s, and the PageContent - PageArea direction is shaping up to go against that principle.

[TejasQ]

I think the having one component per layout would make our users (in this case, me as a user) have to keep track of far too many moving parts.

Ultimately, I tried to do something the way I naturally expected it to work, and then a bug bit me. A bug with height 100%.

I think adherence to an API close to what I tried to do before I got bit makes the most sense, as it would be closer to what developers would normally expect; unless I develop with strange, unexpected patterns all the time.

To that effect, the PageArea approach makes more sense for me.

I already currently get a little lost in thinking “what should I use? PageContent? PageArea? 🤔”. I think adding another PageSomething into the mix would cause me pain as I use Operational components.