UX: Minor styling improvements to invites (#12715)

Reduce the width of the modal to make it consistent with other modals
and use the full width for inputs with a button on the right side.

app/assets/javascripts/discourse/app/templates/modal/create-invite.hbs

@@ -1,13 +1,17 @@
 {{#d-modal-body title=(if invite.id "user.invited.invite.edit_title" "user.invited.invite.new_title")}}
   <form>
-    <div class="input-group invite-link-field">
-      <label for="invite_link">{{i18n "user.invited.invite.instructions"}}</label>
-      {{input name="invite_link"
+    <div class="input-group invite-link">
+      <label for="invite-link">{{i18n "user.invited.invite.instructions"}}</label>
+      <div class="invite-input-with-button">
+        {{input
+          name="invite-link"
           class="invite-link"
           value=invite.link
-              readonly=true}}
+          readonly=true
+        }}
         {{copy-button selector="input.invite-link" copied=(action "copied")}}
       </div>
+    </div>
 
     <p>{{expiresAtLabel}}</p>
 
@@ -37,8 +41,9 @@
     {{/if}}
 
     {{#if isEmail}}
-      <div class="input-group invite-email-field">
+      <div class="input-group invite-email">
         <label for="invite-email">{{i18n "user.invited.invite.email"}}</label>
+        <div class="invite-input-with-button">
           {{input
             id="invite-email"
             value=buffered.email
@@ -52,6 +57,7 @@
             }}
           {{/if}}
         </div>
+      </div>
     {{/if}}
 
     {{#if currentUser.staff}}

app/assets/javascripts/discourse/tests/acceptance/create-invite-modal-test.js

@@ -85,7 +85,7 @@ acceptance("Invites - Create & Edit Invite Modal", function (needs) {
     await visit("/u/eviltrout/invited/pending");
     await click(".invite-controls .btn:first-child");
 
-    await click(".invite-link-field .btn");
+    await click(".invite-link .btn");
 
     await click(".modal-footer .btn:last-child");
     assert.notOk(deleted, "does not delete invite on close");
@@ -96,7 +96,7 @@ acceptance("Invites - Create & Edit Invite Modal", function (needs) {
     await click(".invite-controls .btn:first-child");
 
     await click("#invite-type-email");
-    await click(".invite-link-field .btn");
+    await click(".invite-link .btn");
     assert.equal(
       find("#modal-alert").text(),
       I18n.t("user.invited.invite.blank_email")

app/assets/stylesheets/common/base/modal.scss

@@ -840,11 +840,6 @@
 
     input[type="text"] {
       width: 100%;
-
-      &.invite-link,
-      &#invite-email {
-        width: 85%;
-      }
     }
   }
 
@@ -867,9 +862,7 @@
 
   .input-group input[type="text"],
   .input-group .btn,
-  .future-date-input .select-kit-header,
-  .control-group:nth-child(2) input,
-  .control-group:nth-child(3) input {
+  .future-date-input .select-kit-header {
     height: 34px;
   }
 
@@ -877,6 +870,14 @@
     vertical-align: top;
   }
 
+  .invite-input-with-button {
+    display: flex;
+
+    .btn {
+      margin-left: 3px;
+    }
+  }
+
   .future-date-input {
     .date-picker-wrapper {
       input {

app/assets/stylesheets/desktop/modal.scss

@@ -111,6 +111,6 @@
 .create-invite-modal,
 .create-invite-bulk-modal {
   .modal-inner-container {
-    width: 700px;
+    width: 600px;
   }
 }