Fix scrollable area and padding in user lists dialog

This commit is contained in:
Travis Ralston 2020-01-22 21:07:29 -07:00
parent 1fdd155dd2
commit 054ebb9458
2 changed files with 20 additions and 3 deletions

View file

@ -210,4 +210,19 @@ limitations under the License.
.mx_InviteDialog {
// Prevent the dialog from jumping around randomly when elements change.
height: 590px;
padding-left: 20px; // the design wants some padding on the left
}
.mx_InviteDialog_userSections {
margin-top: 10px;
overflow-y: auto;
padding-right: 45px;
height: 455px; // mx_InviteDialog's height minus some for the upper elements
}
// Right margin for the design. We could apply this to the whole dialog, but then the scrollbar
// for the user section gets weird.
.mx_InviteDialog_helpText,
.mx_InviteDialog_addressBar {
margin-right: 45px;
}

View file

@ -970,7 +970,7 @@ export default class InviteDialog extends React.PureComponent {
title={title}
>
<div className='mx_InviteDialog_content'>
<p>{helpText}</p>
<p className='mx_InviteDialog_helpText'>{helpText}</p>
<div className='mx_InviteDialog_addressBar'>
{this._renderEditor()}
<div className='mx_InviteDialog_buttonAndSpinner'>
@ -987,8 +987,10 @@ export default class InviteDialog extends React.PureComponent {
</div>
{this._renderIdentityServerWarning()}
<div className='error'>{this.state.errorText}</div>
{this._renderSection('recents')}
{this._renderSection('suggestions')}
<div className='mx_InviteDialog_userSections'>
{this._renderSection('recents')}
{this._renderSection('suggestions')}
</div>
</div>
</BaseDialog>
);