From ba91309cb8c5c0ce770d6e7499761c621149b8bf Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 24 Jul 2023 18:42:29 -0400
Subject: [PATCH] UX: fix bookmark modal footer layout (#22766)

---
 .../app/components/modal/bookmark.hbs         | 32 +++++++++----------
 app/assets/stylesheets/common/base/modal.scss | 12 +++----
 .../common/components/bookmark-modal.scss     |  3 +-
 3 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/modal/bookmark.hbs b/app/assets/javascripts/discourse/app/components/modal/bookmark.hbs
index 8ec0aa1f2c4..04bde449617 100644
--- a/app/assets/javascripts/discourse/app/components/modal/bookmark.hbs
+++ b/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"
-        @label="bookmarks.save"
-        class="btn-primary"
-        @action={{this.saveAndClose}}
+        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"
       />
-      <DModalCancel @close={{action "closeWithoutSavingBookmark"}} />
-      {{#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>
+    {{/if}}
   </:footer>
 </DModal>
\ No newline at end of file
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 91e99dc1351..abb67544f4c 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/common/components/bookmark-modal.scss b/app/assets/stylesheets/common/components/bookmark-modal.scss
index 5e8317f8a73..91ffd0deb9b 100644
--- a/app/assets/stylesheets/common/components/bookmark-modal.scss
+++ b/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%;