UX: fix bookmark modal footer layout (#22766)

app/assets/javascripts/discourse/app/components/modal/bookmark.hbs

@@ -77,24 +77,22 @@
   </:body>
 
   <:footer>
-    <div class="control-group">
+    <DButton
+      id="save-bookmark"
+      @label="bookmarks.save"
+      class="btn-primary"
+      @action={{this.saveAndClose}}
+    />
+    <DModalCancel @close={{action "closeWithoutSavingBookmark"}} />
+    {{#if this.showDelete}}
       <DButton
-        id="save-bookmark"
+        id="delete-bookmark"
-        @label="bookmarks.save"
+        @icon="trash-alt"
-        class="btn-primary"
+        class="delete-bookmark btn-danger"
-        @action={{this.saveAndClose}}
+        @action={{this.delete}}
+        @ariaLabel="post.bookmarks.actions.delete_bookmark.name"
+        @title="post.bookmarks.actions.delete_bookmark.name"
       />
-      <DModalCancel @close={{action "closeWithoutSavingBookmark"}} />
+    {{/if}}
-      {{#if this.showDelete}}
-        <DButton
-          id="delete-bookmark"
-          @icon="trash-alt"
-          class="delete-bookmark btn-danger"
-          @action={{this.delete}}
-          @ariaLabel="post.bookmarks.actions.delete_bookmark.name"
-          @title="post.bookmarks.actions.delete_bookmark.name"
-        />
-      {{/if}}
-    </div>
   </:footer>
 </DModal>

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

@@ -135,7 +135,9 @@
     }
   }
 
-  &:not(.history-modal):not(.sidebar__edit-navigation-menu__modal) {
+  &:not(.bookmark-reminder-modal):not(.history-modal):not(
+      .sidebar__edit-navigation-menu__modal
+    ) {
     .modal-body:not(.reorder-categories):not(.poll-ui-builder):not(
         .poll-breakdown
       ) {
@@ -157,17 +159,13 @@
   align-items: center;
   padding: 14px 15px 10px;
   border-top: 1px solid var(--primary-low);
-  --btn-bottom-margin: 0.3em;
+  gap: 0.3em 0;
   .btn {
-    margin: 0 0.75em var(--btn-bottom-margin) 0;
+    margin: 0 0.75em 0 0;
     &[href] {
       min-height: unset;
     }
   }
-
-  a {
-    margin-bottom: var(--btn-bottom-margin);
-  }
 }
 
 .modal {

app/assets/stylesheets/common/components/bookmark-modal.scss

@@ -6,8 +6,6 @@
 
   .modal-footer {
     margin: 0;
-    border-top: 0;
-    padding: 0 1em 1em 1em;
 
     .delete-bookmark {
       margin-left: auto;
@@ -22,6 +20,7 @@
   .modal-body {
     width: 375px;
     box-sizing: border-box;
+    max-height: 70dvh;
 
     @media (max-width: 600px) {
       width: 100%;