Fix scrollable area and padding in user lists dialog

res/css/views/dialogs/_InviteDialog.scss

@@ -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;
 }

src/components/views/dialogs/InviteDialog.js

@@ -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,9 +987,11 @@ export default class InviteDialog extends React.PureComponent {
                     </div>
                     {this._renderIdentityServerWarning()}
                     <div className='error'>{this.state.errorText}</div>
+                    <div className='mx_InviteDialog_userSections'>
                         {this._renderSection('recents')}
                         {this._renderSection('suggestions')}
                     </div>
+                </div>
             </BaseDialog>
         );
     }