Using input group for allowed and block instance buttons. (#2905)

- Fixes #2888

src/shared/components/home/site-form.tsx

@@ -701,6 +701,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
           {I18NextService.i18n.t(key)}
         </label>
         <div className="d-flex justify-content-between align-items-center">
+          <div className="input-group ms-2">
             <input
               type="text"
               placeholder="instance.tld"
@@ -712,9 +713,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             />
             <button
               type="button"
-            className="btn btn-sm bg-success ms-2"
+              className="btn bg-success"
               onClick={linkEvent(key, this.handleAddInstance)}
-            style={"width: 2rem; height: 2rem;"}
               tabIndex={
                 -1 /* Making this untabble because handling enter key in text input makes keyboard support for this button redundant */
               }
@@ -725,6 +725,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
               />
             </button>
           </div>
+        </div>
         {selectedInstances && selectedInstances.length > 0 && (
           <ul className="mt-3 list-unstyled w-100 d-flex flex-column justify-content-around align-items-center">
             {selectedInstances.map(instance => (
@@ -738,7 +739,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                 <button
                   id={instance}
                   type="button"
-                  style={"width: 2rem; height: 2rem;"}
                   className="btn btn-sm bg-danger"
                   onClick={linkEvent(
                     { key, instance },