From 663ce73e263f73264f0c8c82e205a24c701f6b56 Mon Sep 17 00:00:00 2001
From: "Ella E." <ella@discourse.org>
Date: Wed, 9 Oct 2024 19:40:05 -0600
Subject: [PATCH] UX: Set consistent width for primary content in admin UI
 config area (#29147)

* UX: Adjust the config area primary content width

* UX: Tweak spacing on the new feature cards

* apply prettier
---
 .../components/dashboard-new-features.gjs     |  5 ++-
 .../admin/addon/templates/whats-new.hbs       | 31 ++++++++++---------
 .../stylesheets/common/admin/admin_base.scss  |  3 +-
 .../common/admin/admin_config_area.scss       | 27 ++++++++++++++++
 .../stylesheets/common/admin/dashboard.scss   |  8 ++---
 5 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/components/dashboard-new-features.gjs b/app/assets/javascripts/admin/addon/components/dashboard-new-features.gjs
index 38b28f09faf..cff826158e6 100644
--- a/app/assets/javascripts/admin/addon/components/dashboard-new-features.gjs
+++ b/app/assets/javascripts/admin/addon/components/dashboard-new-features.gjs
@@ -45,7 +45,10 @@ export default class DashboardNewFeatures extends Component {
   }
 
   <template>
-    <div class="admin-config-area" {{didInsert this.loadNewFeatures}}>
+    <div
+      class="admin-config-area__primary-content"
+      {{didInsert this.loadNewFeatures}}
+    >
       {{#if this.groupedNewFeatures}}
         {{#each this.groupedNewFeatures as |groupedFeatures|}}
           <AdminConfigAreaCard @translatedHeading={{groupedFeatures.date}}>
diff --git a/app/assets/javascripts/admin/addon/templates/whats-new.hbs b/app/assets/javascripts/admin/addon/templates/whats-new.hbs
index 062b3ba4511..751967c07d7 100644
--- a/app/assets/javascripts/admin/addon/templates/whats-new.hbs
+++ b/app/assets/javascripts/admin/addon/templates/whats-new.hbs
@@ -1,16 +1,19 @@
-<div class="admin-config-area">
-  <AdminPageHeader
-    @titleLabel="admin.dashboard.new_features.title"
-    @descriptionLabel="admin.dashboard.new_features.subtitle"
-    @learnMoreUrl="https://meta.discourse.org/tags/c/announcements/67/release-notes"
-  >
-    <:breadcrumbs>
-      <DBreadcrumbsItem
-        @path="/admin/whats-new"
-        @label={{i18n "admin.dashboard.new_features.title"}}
-      />
-    </:breadcrumbs>
-  </AdminPageHeader>
+<AdminPageHeader
+  @titleLabel="admin.dashboard.new_features.title"
+  @descriptionLabel="admin.dashboard.new_features.subtitle"
+  @learnMoreUrl="https://meta.discourse.org/tags/c/announcements/67/release-notes"
+  @hideTabs={{true}}
+>
+  <:breadcrumbs>
+    <DBreadcrumbsItem
+      @path="/admin/whats-new"
+      @label={{i18n "admin.dashboard.new_features.title"}}
+    />
+  </:breadcrumbs>
+</AdminPageHeader>
 
-  <DashboardNewFeatures />
+<div class="admin-container admin-config-page__main-area">
+  <div class="admin-config-area">
+    <DashboardNewFeatures />
+  </div>
 </div>
\ No newline at end of file
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 255dd16f239..c1e5c8c5c92 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -459,7 +459,8 @@ $mobile-breakpoint: 700px;
 }
 
 .admin-container {
-  margin-top: 10px;
+  margin-top: var(--space-4);
+  margin-bottom: var(--space-4);
 
   .admin-section {
     margin-bottom: 1em;
diff --git a/app/assets/stylesheets/common/admin/admin_config_area.scss b/app/assets/stylesheets/common/admin/admin_config_area.scss
index 69372bf528f..bb8635fa5da 100644
--- a/app/assets/stylesheets/common/admin/admin_config_area.scss
+++ b/app/assets/stylesheets/common/admin/admin_config_area.scss
@@ -48,6 +48,33 @@
 }
 
 .admin-config-area {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--space-4);
+  align-items: flex-start;
+
+  @media (max-width: $mobile-breakpoint) {
+    flex-direction: column;
+  }
+
+  &__primary-content {
+    flex: 0 1 70%;
+
+    @media (max-width: $mobile-breakpoint) {
+      flex: 0 1 auto;
+    }
+  }
+
+  &__aside {
+    /* use for help inset */
+    flex: 0 1 30%;
+    padding: var(--space-2);
+
+    @media (max-width: $mobile-breakpoint) {
+      flex: 0 1 auto;
+    }
+  }
+
   &__settings {
     .admin-site-settings-filter-controls {
       margin-bottom: 1em;
diff --git a/app/assets/stylesheets/common/admin/dashboard.scss b/app/assets/stylesheets/common/admin/dashboard.scss
index 1b61bd84d1e..db364db778c 100644
--- a/app/assets/stylesheets/common/admin/dashboard.scss
+++ b/app/assets/stylesheets/common/admin/dashboard.scss
@@ -655,7 +655,6 @@
     margin-bottom: 1em;
   }
   .admin-new-feature-item__learn-more {
-    margin-bottom: 1em;
     display: inline-block;
   }
 }
@@ -663,8 +662,10 @@
 .admin-new-feature-item {
   display: flex;
   align-items: flex-start;
-  margin-bottom: 1.5em;
   border-bottom: 1px solid var(--primary-low);
+  &:not(:first-child) {
+    margin-top: var(--space-4);
+  }
   &:last-child {
     border-bottom: none;
   }
@@ -676,12 +677,11 @@
   }
 
   &__content {
-    padding-right: 0.5em;
     width: 100%;
   }
   &__header {
     display: flex;
-    align-items: flex-start;
+    align-items: baseline;
     font-weight: bold;
     margin-bottom: 0.5em;
   }