Voting: no results and EmptyStateCards vertical span

[AquiGorka]

References

• Post 0.8 tasks aragonone/product#196
• https://www.notion.so/aragon/Design-review-0-8-items-bf12838cc3874c05811a96722a961ccd#f64d575da7f94250a8a08193e2ee2e7f

Goal
For this type of screens (results not found or empty states) make the box take the 75% of the screen height in a way that we ensure it won't collide with the Help scout button.

Considerations
Apps should be aware if the Help Scout button is being displayed (this is not implemented).

Concerns
These changes will need quite a handful of changes on a lot of components that are used all around - potentially impact other layouts:

Changes to Main: flex-direction: column; display: flex; (red container in screenshot)
Changes to Layout: flex: 1; and compact only width: 100%; (yellow container in screenshot)

Voting (will have to do this per app per container)
Changes to containing element height: calc(75vh - 168px); min-height: 450px;

Considerations
New height of 75% of the available space (considering the 168px used up by the app title, filters and margin, see attached screenshot).

I suggest we have this span 75% of the available space up to a certain point (min-height) so that the box does not collapse beyond its own content. So at that point the Help Scout button will show on top of the card.

How will this look like

168px calculations

Videos

• https://www.loom.com/share/ad665b03d56847eb868348f58a5396d7
• https://www.loom.com/share/da7e1a03800442798efe38638a70dc14

cc @bpierre so that he can chip in with insights on how these changes will impact other places where this components are being used.

👆 Those changes make it so that these containers use up 75% of their available space which is NOT that different from the current behaviour:

• https://www.loom.com/share/455710c304144ccc8ce268ae4715c0de

Is it worth the effort for such a small visual change?
Should we consider using another percentage? If we go back to the idea of spanning up to the help scout button then that would require more changes.

Required specs if we proceed
Small viewports, and this not only refers to mobile but also desktop browsers that have been vertically resized.

I'm open to suggestions and ideas.

[sohkai]

Closing; generally the HelpScout button being overlayed on top has not been problematic with the current design.