From ccf0fdaa81446c111c8b5551c907218731d85ac2 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 1 Mar 2024 12:34:55 -0500
Subject: [PATCH] UX: improve group email setting wrap, cleanup styles (#25985)

---
 .../components/group-imap-email-settings.hbs  |  2 +-
 .../components/group-smtp-email-settings.hbs  |  2 +-
 app/assets/stylesheets/common/base/group.scss | 26 ++++++------
 .../stylesheets/common/base/groups.scss       |  1 +
 .../stylesheets/common/base/tagging.scss      |  1 -
 app/assets/stylesheets/desktop/_index.scss    |  1 -
 app/assets/stylesheets/desktop/group.scss     | 17 --------
 app/assets/stylesheets/mobile/_index.scss     |  1 -
 app/assets/stylesheets/mobile/group.scss      | 41 -------------------
 9 files changed, 16 insertions(+), 76 deletions(-)
 delete mode 100644 app/assets/stylesheets/desktop/group.scss
 delete mode 100644 app/assets/stylesheets/mobile/group.scss

diff --git a/app/assets/javascripts/discourse/app/components/group-imap-email-settings.hbs b/app/assets/javascripts/discourse/app/components/group-imap-email-settings.hbs
index 41a281120d9..846df0639ac 100644
--- a/app/assets/javascripts/discourse/app/components/group-imap-email-settings.hbs
+++ b/app/assets/javascripts/discourse/app/components/group-imap-email-settings.hbs
@@ -14,7 +14,7 @@
         />
       </div>
 
-      <label for="enable_ssl_imap">
+      <label for="enable_ssl_imap" class="groups-form__enable-ssl">
         <Input
           @type="checkbox"
           @checked={{this.form.imap_ssl}}
diff --git a/app/assets/javascripts/discourse/app/components/group-smtp-email-settings.hbs b/app/assets/javascripts/discourse/app/components/group-smtp-email-settings.hbs
index 88a10d506e2..a5f4ef7b9a7 100644
--- a/app/assets/javascripts/discourse/app/components/group-smtp-email-settings.hbs
+++ b/app/assets/javascripts/discourse/app/components/group-smtp-email-settings.hbs
@@ -27,7 +27,7 @@
         />
       </div>
 
-      <label for="enable_ssl">
+      <label for="enable_ssl" class="groups-form__enable-ssl">
         <Input
           @type="checkbox"
           @checked={{this.form.smtp_ssl}}
diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss
index b32f181147a..2cffb6217fb 100644
--- a/app/assets/stylesheets/common/base/group.scss
+++ b/app/assets/stylesheets/common/base/group.scss
@@ -271,28 +271,28 @@ table.group-category-permissions {
 
 .group-smtp-email-settings,
 .group-imap-email-settings {
-  .groups-form {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    margin-bottom: 0;
-
-    &.groups-form-imap {
-      grid-template-columns: 1fr 1fr 2fr;
-    }
-  }
-
   background-color: var(--primary-very-low);
   padding: 1em;
   margin: 1em 0;
   border: 1px solid var(--primary-low);
 
-  .group-imap-mailboxes {
-    .combo-box {
-      width: 50%;
+  .groups-form {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(13em, 1fr));
+    margin-bottom: 0;
+    gap: 0 1em;
+
+    details,
+    .ember-text-field {
+      width: 100%;
     }
   }
 }
 
+.groups-form__enable-ssl {
+  margin-bottom: 1em;
+}
+
 .group-manage-email-additional-settings-wrapper {
   margin-top: 1em;
 }
diff --git a/app/assets/stylesheets/common/base/groups.scss b/app/assets/stylesheets/common/base/groups.scss
index 7f924ab8672..5fda53b50a7 100644
--- a/app/assets/stylesheets/common/base/groups.scss
+++ b/app/assets/stylesheets/common/base/groups.scss
@@ -153,6 +153,7 @@
     display: inline;
   }
   &.groups-notifications-form {
+    max-width: 33em;
     .control-instructions {
       color: var(--primary-medium);
       margin-bottom: 10px;
diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss
index 1f99ade1733..196032fffbd 100644
--- a/app/assets/stylesheets/common/base/tagging.scss
+++ b/app/assets/stylesheets/common/base/tagging.scss
@@ -260,7 +260,6 @@ header .discourse-tag {
         "empty dropdown";
       input {
         grid-area: input;
-        margin-top: 4px;
       }
       label {
         grid-area: label;
diff --git a/app/assets/stylesheets/desktop/_index.scss b/app/assets/stylesheets/desktop/_index.scss
index 567516630c9..f92a9c13947 100644
--- a/app/assets/stylesheets/desktop/_index.scss
+++ b/app/assets/stylesheets/desktop/_index.scss
@@ -4,7 +4,6 @@
 @import "compose";
 @import "discourse";
 @import "edit-category";
-@import "group";
 @import "header";
 @import "invite-signup";
 @import "latest-topic-list";
diff --git a/app/assets/stylesheets/desktop/group.scss b/app/assets/stylesheets/desktop/group.scss
deleted file mode 100644
index 0b095a67ab1..00000000000
--- a/app/assets/stylesheets/desktop/group.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.group-activity-outlet,
-.group-messages-outlet,
-.group-manage-outlet {
-  width: 85%;
-}
-
-.groups-form.groups-notifications-form {
-  width: 500px;
-  max-width: 100%;
-}
-
-.group-smtp-email-settings,
-.group-imap-email-settings {
-  .group-email-last-updated-details {
-    text-align: right;
-  }
-}
diff --git a/app/assets/stylesheets/mobile/_index.scss b/app/assets/stylesheets/mobile/_index.scss
index 8819904893c..8c813dc2662 100644
--- a/app/assets/stylesheets/mobile/_index.scss
+++ b/app/assets/stylesheets/mobile/_index.scss
@@ -13,7 +13,6 @@
 @import "discourse";
 @import "edit-category";
 @import "emoji";
-@import "group";
 @import "header";
 @import "invite-signup";
 @import "lightbox";
diff --git a/app/assets/stylesheets/mobile/group.scss b/app/assets/stylesheets/mobile/group.scss
deleted file mode 100644
index 56a5002b246..00000000000
--- a/app/assets/stylesheets/mobile/group.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-.group {
-  margin: 0;
-  padding-bottom: 3em;
-}
-
-.group-name {
-  margin: 5px 0 0 0;
-}
-
-.group-nav {
-  width: 100%;
-}
-
-.group-activity,
-.group-manage {
-  position: relative;
-}
-
-.group-info {
-  flex-wrap: wrap;
-  .group-details-button button {
-    margin-top: 0.5em;
-  }
-}
-
-.group-smtp-email-settings,
-.group-imap-email-settings {
-  .groups-form {
-    grid-template-columns: 1fr;
-
-    input[type="text"],
-    input[type="password"],
-    .group-imap-mailboxes .combo-box {
-      width: 100%;
-    }
-
-    &.groups-form-imap {
-      grid-template-columns: 1fr;
-    }
-  }
-}