From 19b14d6ec279782295869341d403bbe278c8d397 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Tue, 14 Sep 2021 09:55:40 -0400
Subject: [PATCH] UX: Fix tab groups editing layout issues on mobile (#14329)

---
 .../templates/components/tag-groups-form.hbs  |  6 +--
 app/assets/stylesheets/common/base/group.scss |  5 +++
 .../stylesheets/common/base/tagging.scss      | 38 ++++++++++++++++++-
 app/assets/stylesheets/mobile/group.scss      |  1 +
 4 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/components/tag-groups-form.hbs b/app/assets/javascripts/discourse/app/templates/components/tag-groups-form.hbs
index d7dcb9aa8f5..4437c845450 100644
--- a/app/assets/javascripts/discourse/app/templates/components/tag-groups-form.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/tag-groups-form.hbs
@@ -42,7 +42,7 @@
 </section>
 
 <section class="group-visibility">
-  <div>
+  <div class="group-visibility-option">
     {{radio-button
       class="tag-permissions-choice"
       name="tag-permissions-choice"
@@ -55,7 +55,7 @@
       {{i18n "tagging.groups.everyone_can_use"}}
     </label>
   </div>
-  <div>
+  <div class="group-visibility-option">
     {{radio-button
       class="tag-permissions-choice"
       name="tag-permissions-choice"
@@ -80,7 +80,7 @@
       }}
     </div>
   </div>
-  <div>
+  <div class="group-visibility-option">
     {{radio-button
       class="tag-permissions-choice"
       name="tag-permissions-choice"
diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss
index 0ea87b2138c..f0e65814a01 100644
--- a/app/assets/stylesheets/common/base/group.scss
+++ b/app/assets/stylesheets/common/base/group.scss
@@ -269,3 +269,8 @@ table.group-category-permissions {
 .group-manage-email-additional-settings-wrapper {
   margin-top: 1em;
 }
+
+.groups-form .control-group.buttons {
+  margin-bottom: 0px;
+  padding: 1em 0;
+}
diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss
index a832d8e9da3..11ad84d5256 100644
--- a/app/assets/stylesheets/common/base/tagging.scss
+++ b/app/assets/stylesheets/common/base/tagging.scss
@@ -215,7 +215,7 @@ header .discourse-tag {
   grid-template-columns: 1fr 5fr;
   grid-template-rows: auto auto;
   grid-template-areas: "header header" "sidebar content" "fullwidth fullwidth";
-  padding-bottom: 3em;
+  padding-bottom: 5em;
 
   > h2 {
     grid-area: header;
@@ -236,6 +236,7 @@ header .discourse-tag {
   .tag-groups-sidebar + .tag-group-content {
     grid-area: content;
   }
+
   .tag-group-content {
     grid-area: fullwidth;
 
@@ -255,14 +256,32 @@ header .discourse-tag {
       margin-right: 5px;
       &.radio {
         padding-left: 0px;
+        margin-right: 0px;
+      }
+    }
+
+    .group-visibility-option {
+      grid-gap: 0.5rem;
+      display: grid;
+      grid-template-columns: 20px 1fr;
+      grid-template-areas:
+        "input label"
+        "empty dropdown";
+      input {
+        grid-area: input;
+        margin-top: 4px;
+      }
+      label {
+        grid-area: label;
       }
     }
     .btn {
       margin-right: 10px;
     }
     .group-access-control {
-      margin-left: 26px;
       margin-bottom: 1em;
+      grid-area: dropdown;
+      grid-row: 2;
     }
     input[type="radio"] ~ .group-access-control {
       display: none;
@@ -271,6 +290,21 @@ header .discourse-tag {
       display: block;
     }
   }
+  @include breakpoint(tablet) {
+    .select-kit.multi-select {
+      width: 100%;
+    }
+
+    .tag-groups-sidebar {
+      max-width: 90px;
+      ul li a {
+        word-break: break-word;
+        max-width: 90px;
+        font-size: var(--font-down-1);
+      }
+    }
+  }
+
   .tag-group-controls {
     display: flex;
     justify-content: space-between;
diff --git a/app/assets/stylesheets/mobile/group.scss b/app/assets/stylesheets/mobile/group.scss
index 435303d381f..b17274c17e0 100644
--- a/app/assets/stylesheets/mobile/group.scss
+++ b/app/assets/stylesheets/mobile/group.scss
@@ -1,5 +1,6 @@
 .group {
   margin: 0;
+  padding-bottom: 3em;
 }
 
 .group-name {