OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Make create poll dialog scale better 

Fixes: vector-im/element-web#21855
pull/28788/head^2
Johannes Marbach 2023-01-06 17:24:13 +01:00
parent 6ae309955b
commit fc6b83c786
2 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
res/css/views/dialogs/_CompoundDialog.pcss
View File

@ -27,6 +27,11 @@ limitations under the License.
} }
.mx_CompoundDialog { .mx_CompoundDialog {
.mx_Dialog {
display: flex;
flex-direction: column;
}
.mx_CompoundDialog_header { .mx_CompoundDialog_header {
padding: 32px 32px 16px 32px; padding: 32px 32px 16px 32px;
@ -49,6 +54,13 @@ limitations under the License.
} }
} }
.mx_CompoundDialog_form {
display: flex;
flex-direction: column;
min-height: 0;
max-height: 100%;
}
.mx_CompoundDialog_content { .mx_CompoundDialog_content {
overflow: auto; overflow: auto;
padding: 8px 32px; padding: 8px 32px;
@ -57,10 +69,6 @@ limitations under the License.
.mx_CompoundDialog_footer { .mx_CompoundDialog_footer {
padding: 20px 32px; padding: 20px 32px;
text-align: right; text-align: right;
position: absolute;
bottom: 0;
left: 0;
right: 0;
.mx_AccessibleButton { .mx_AccessibleButton {
margin-left: 24px; margin-left: 24px;
@ -69,14 +77,17 @@ limitations under the License.
} }
.mx_ScrollableBaseDialog { .mx_ScrollableBaseDialog {
display: flex;
flex-direction: column;
width: 544px; /* fixed */ width: 544px; /* fixed */
height: 516px; /* fixed */ height: 516px; /* fixed */
max-width: 100%;
.mx_CompoundDialog_content { min-height: 0;
height: 349px; /* dialogHeight - header - footer */ max-height: 80%;
}
.mx_CompoundDialog_footer { .mx_CompoundDialog_footer {
box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.05); /* hardcoded colour for both themes */ box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.05); /* hardcoded colour for both themes */
z-index: 1;
} }
} }

2
src/components/views/dialogs/ScrollableBaseModal.tsx
View File

@ -96,7 +96,7 @@ export default abstract class ScrollableBaseModal<
aria-label={_t("Close dialog")} aria-label={_t("Close dialog")}
/> />
</div> </div>
<form onSubmit={this.onSubmit}> <form onSubmit={this.onSubmit} className="mx_CompoundDialog_form">
<div className="mx_CompoundDialog_content">{this.renderContent()}</div> <div className="mx_CompoundDialog_content">{this.renderContent()}</div>
<div className="mx_CompoundDialog_footer"> <div className="mx_CompoundDialog_footer">
<AccessibleButton onClick={this.onCancel} kind="primary_outline"> <AccessibleButton onClick={this.onCancel} kind="primary_outline">