From 94199715cd460d957a0fa75e0d77b69cc2b563c7 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 21 Feb 2024 18:22:03 -0500
Subject: [PATCH] UX: fix sidebar section modal styles (#25803)

---
 .../app/components/modal/sidebar-section-form.hbs      | 10 +++++++---
 app/assets/stylesheets/common/base/sidebar.scss        |  4 ++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/modal/sidebar-section-form.hbs b/app/assets/javascripts/discourse/app/components/modal/sidebar-section-form.hbs
index 67c44ca954c..d1ee793eaa5 100644
--- a/app/assets/javascripts/discourse/app/components/modal/sidebar-section-form.hbs
+++ b/app/assets/javascripts/discourse/app/components/modal/sidebar-section-form.hbs
@@ -122,10 +122,14 @@
         <label class="checkbox-label">
           {{#if this.transformedModel.sectionType}}
             <DTooltip
-              @icon="check-square"
               @content={{i18n "sidebar.sections.custom.always_public"}}
               class="always-public-tooltip"
-            />
+            >
+              <:trigger>
+                {{d-icon "check-square"}}
+                <span>{{i18n "sidebar.sections.custom.public"}}</span>
+              </:trigger>
+            </DTooltip>
           {{else}}
             <Input
               @type="checkbox"
@@ -133,8 +137,8 @@
               class="mark-public"
               disabled={{this.transformedModel.sectionType}}
             />
+            <span>{{i18n "sidebar.sections.custom.public"}}</span>
           {{/if}}
-          <span>{{i18n "sidebar.sections.custom.public"}}</span>
         </label>
       </div>
     {{/if}}
diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss
index f812c7d8411..e34175c8ce4 100644
--- a/app/assets/stylesheets/common/base/sidebar.scss
+++ b/app/assets/stylesheets/common/base/sidebar.scss
@@ -230,10 +230,10 @@
       color: var(--tertiary-hover);
     }
   }
-  .modal-footer {
+  .d-modal__footer {
     display: grid;
     grid-template-columns: auto 1fr auto;
-    gap: 0.5em;
+    gap: 0.5em 1em;
     @include breakpoint(mobile-extra-large) {
       grid-template-columns: auto 1fr;
       justify-items: left;