fix(SecurityDialog): fix button overflow

css/modals/invite/_info.scss

@@ -38,6 +38,7 @@
     }
 
     .info-password-input {
+        width: 100%;
         background-color: transparent;
         border: none;
         color: inherit;

css/modals/invite/_invite_more.scss

@@ -21,11 +21,10 @@
 
     &-button {
         display: flex;
-        justify-content: space-between;
-        align-items: center;
         margin: auto;
         padding: 8px 16px;
-        width: 152px;
+        width: fit-content;
+        width: -moz-fit-content;
         height: 24px;
         background: #0376DA;
         border-radius: 3px;
@@ -38,6 +37,7 @@
         }
 
         &-text {
+            margin-left: 8px;
             font-size: 15px;
             line-height: 24px;
         }

css/modals/security/_security.scss

@@ -17,8 +17,8 @@
                     color: #6FB1EA;
                 }
 
-                & > a + a {
-                    margin-left: 24px;
+                & > :first-child:not(:last-child) {
+                    margin-right: 24px;
                 }
             }
         }

react/features/conference/components/web/InviteMore.js

@@ -56,7 +56,7 @@ function InviteMore({
                     className = 'invite-more-button'
                     onClick = { onClick }>
                     <Icon src = { IconInviteMore } />
-                    <div className = 'invite-more-text'>
+                    <div className = 'invite-more-button-text'>
                         {t('addPeople.inviteMorePrompt')}
                     </div>
                 </div>