UX: Move post date under title in share-modal (#16455)

The old position was less than ideal on mobile.

app/assets/javascripts/discourse/app/templates/components/d-modal.hbs

@@ -16,7 +16,7 @@
             <h3 id="discourse-modal-title">{{title}}</h3>
 
             {{#if subtitle}}
-              <p>{{subtitle}}</p>
+              <p class="subtitle">{{subtitle}}</p>
             {{/if}}
           </div>
         {{/if}}

app/assets/javascripts/discourse/app/templates/modal/share-topic.hbs

@@ -1,4 +1,7 @@
-{{#d-modal-body rawTitle=(if post (i18n "post.share.title" post_number=post.post_number) (i18n "topic.share.title"))}}
+{{#d-modal-body
+  rawTitle=(if post (i18n "post.share.title" post_number=post.post_number) (i18n "topic.share.title"))
+  rawSubtitle=(if post displayDate)
+}}
   <form>
     <div class="input-group invite-link">
       <label for="invite-link">
@@ -52,10 +55,6 @@
           {{/if}}
         {{/if}}
       </div>
-
-      {{#if post}}
-        <div class="date">{{displayDate}}</div>
-      {{/if}}
     </div>
   </form>
 {{/d-modal-body}}

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

@@ -31,12 +31,6 @@
   .new-topic {
     margin-right: 0;
   }
-
-  .date {
-    color: var(--primary-med-or-secondary-med);
-    font-weight: normal;
-    margin-left: auto;
-  }
 }
 
 .share-twitter {
@@ -53,6 +47,12 @@
 // topic share modal
 
 .share-topic-modal {
+  .modal-header {
+    .subtitle {
+      color: var(--primary-med-or-secondary-med);
+    }
+  }
+
   form {
     margin-bottom: 0;
   }

app/assets/stylesheets/desktop/modal.scss

@@ -111,6 +111,15 @@
 .create-invite-modal,
 .create-invite-bulk-modal,
 .share-topic-modal {
+  .title {
+    align-items: center;
+    display: flex;
+
+    .subtitle {
+      margin-left: 0.5em;
+    }
+  }
+
   &.modal .modal-body {
     margin: 1em;
     padding: unset;