UI: minor tweaks to insert-hyplink modal (#12871)

UI: minor tweaks to insert-hyplink modal (#12871)

  • ensures footer buttons are aligned
  • prevents focus on close button to be much larger than it should be, note that this fix could impact other modals but the current solution is not working, so better fix it differently if needed
diff --git a/app/assets/javascripts/discourse/app/templates/modal/insert-hyperlink.hbs b/app/assets/javascripts/discourse/app/templates/modal/insert-hyperlink.hbs
index 31e5c46..c589e64 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/insert-hyperlink.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/insert-hyperlink.hbs
@@ -1,5 +1,5 @@
-<form {{action "ok" on="submit"}}>
-  {{#d-modal-body title="composer.link_dialog_title" class="insert-link"}}
+{{#d-modal-body title="composer.link_dialog_title" class="insert-link"}}
+  <form id="insert-hyperlink-form" {{action "ok" on="submit"}}>
     <div class="inputs">
       {{text-field
         value=linkUrl
@@ -18,7 +18,8 @@
               class="search-link"
               href={{result.url}}
               onclick={{action "linkClick"}}
-              data-title={{result.fancy_title}}>
+              data-title={{result.fancy_title}}
+            >
               {{topic-status topic=result disableActions=true}}
               {{replace-emoji result.fancy_title}}
               <div class="search-category">
@@ -36,10 +37,21 @@
     <div class="inputs">
       {{text-field value=linkText placeholderKey="composer.link_optional_text" class="link-text"}}
     </div>
-  {{/d-modal-body}}
+  </form>
+{{/d-modal-body}}
 
-  <div class="modal-footer">
-    {{d-button class="btn-primary" label="composer.modal_ok" action=(action "ok") type="submit"}}
-    {{d-button class="btn-danger" label="composer.modal_cancel" action=(action "cancel")}}
-  </div>
-</form>
+<div class="modal-footer">
+  {{d-button
+    class="btn-primary"
+    label="composer.modal_ok"
+    action=(action "ok")
+    type="submit"
+    form="insert-hyperlink-form"
+  }}
+
+  {{d-button
+    class="btn-danger"
+    label="composer.modal_cancel"
+    action=(action "cancel")
+  }}
+</div>
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index ec88aa7..c664901 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -73,7 +73,7 @@
   .modal-close {
     order: 2;
     margin-left: auto;
-    padding-left: 2em;
+
     .close {
       color: var(--primary-high);
     }

GitHub sha: 8be0191f

This commit appears in #12871 which was approved by pmusaraj. It was merged by jjaffeux.