UX: improve group email setting wrap, cleanup styles (#25985)

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}}

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}}

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;
 }

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;

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;

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";

app/assets/stylesheets/desktop/group.scss

@@ -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;
-  }
-}

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";

app/assets/stylesheets/mobile/group.scss

@@ -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;
-    }
-  }
-}