gristlabs_grist-core/app/client/components/CustomView.css
Dmitry S fbc0418118 (core) Fix CustomView taking up more height than page layout gives it.
Summary:
Each view type currently responsible for fitting appropriately within the box
it's given (e.g. deciding which container is scrollable). CustomView wasn't
doing a good job of it, particularly when showing "columns aren't mapped"
message.

Test Plan:
Only CSS affected. Checked manually on FF, Chrome, Safari that CustomViews take
the right amount of space, and scroll well, in 3 situations: not-mapped,
not-configured, and a functional widget.

Reviewers: jarek

Reviewed By: jarek

Subscribers: jarek

Differential Revision: https://phab.getgrist.com/D4316
2024-08-13 12:34:28 -04:00

52 lines
1.0 KiB
CSS

/*
* Ensure the custom view section fits within its allocated area even if it needs to scroll inside
* of it. This is not an issue when it contains an iframe, but .custom_view_no_mapping element
* could be taller, but its intrinsic height should not affect the container.
*/
.custom_view_container {
overflow: auto;
flex-basis: 0px;
}
iframe.custom_view {
border: none;
height: 100%;
flex: auto;
}
.custom_view_notification {
padding: 15px;
margin: 15px;
}
.custom_view_no_mapping {
padding: 15px;
margin: 15px;
display: flex;
flex-direction: column;
align-items: center;
color: var(--grist-theme-text, var(--grist-color-dark));
}
.custom_view_no_mapping h1 {
max-width: 310px;
margin-bottom: 24px;
margin-top: 56px;
font-style: normal;
font-weight: 600;
font-size: 22px;
line-height: 26px;
text-align: center;
text-wrap: balance;
}
.custom_view_no_mapping p {
max-width: 310px;
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 16px;
text-align: center;
}