UX: enable badge title on mobile, style cleanup (#25968)

app/assets/javascripts/discourse/app/components/badge-title.hbs

@@ -1,36 +1,38 @@
 <div class="badge-title">
-  <section class="user-content" id="user-content">
-    <form class="form-horizontal">
-      <div class="control-group">
-        <div class="controls">
-          <h3>{{i18n "badges.select_badge_for_title"}}</h3>
-        </div>
-      </div>
+  <form class="form-horizontal">
 
-      <div class="control-group">
-        <div class="controls">
-          <ComboBox
-            @value={{this._selectedUserBadgeId}}
-            @nameProperty="badge.name"
-            @content={{this.selectableUserBadges}}
-            @onChange={{action (mut this._selectedUserBadgeId)}}
-          />
-        </div>
-      </div>
+    <h3>{{i18n "badges.select_badge_for_title"}}</h3>
 
-      <div class="control-group">
-        <div class="controls">
+    <div class="control-group">
+      <div class="controls">
+        <ComboBox
+          @value={{this._selectedUserBadgeId}}
+          @nameProperty="badge.name"
+          @content={{this.selectableUserBadges}}
+          @onChange={{action (mut this._selectedUserBadgeId)}}
+        />
+      </div>
+    </div>
+
+    <div class="control-group">
+      <div class="controls">
+        <DButton
+          @action={{this.saveBadgeTitle}}
+          @disabled={{this._isSaving}}
+          @label={{if this._isSaving "saving" "save"}}
+          class="btn-primary"
+        />
+        {{#if this.closeAction}}
           <DButton
-            @action={{this.saveBadgeTitle}}
-            @disabled={{this._isSaving}}
-            @label={{if this._isSaving "saving" "save"}}
-            class="btn-primary"
+            @action={{this.closeAction}}
+            @label="close"
+            class="btn-default close-btn"
           />
-          {{#if this._isSaved}}
-            <span>{{i18n "saved"}}</span>
-          {{/if}}
-        </div>
+        {{/if}}
+        {{#if this._isSaved}}
+          <span role="status" class="badge-title__saved">{{i18n "saved"}}</span>
+        {{/if}}
       </div>
-    </form>
-  </section>
+    </div>
+  </form>
 </div>

app/assets/javascripts/discourse/app/templates/badges/show.hbs

@@ -37,11 +37,9 @@
 
     {{#if this.canSelectTitle}}
       <div class="badge-set-title {{if this.hiddenSetTitle 'hidden' ''}}">
-        <BadgeTitle @selectableUserBadges={{this.selectableUserBadges}} />
-        <DButton
-          @action={{this.toggleSetUserTitle}}
-          @label="close"
-          class="btn-default close-btn"
+        <BadgeTitle
+          @selectableUserBadges={{this.selectableUserBadges}}
+          @closeAction={{this.toggleSetUserTitle}}
         />
       </div>
     {{/if}}

app/assets/stylesheets/common/base/user-badges.scss

@@ -216,7 +216,6 @@
 
     @media screen and (min-width: 767px) {
       max-width: calc(var(--d-max-width) / 2);
-      margin-right: 1.5em;
     }
 
     .badge-contents {
@@ -269,6 +268,7 @@
   flex-direction: row;
   margin-bottom: 2em;
   margin-top: 1em;
+  gap: 1em;
 
   .badge-grant-info {
     &.hidden {
@@ -285,23 +285,42 @@
   }
 
   .badge-set-title {
+    flex: 0 1 auto;
     padding: 1.5em;
     border: 1px solid var(--primary-low);
 
-    .user-content {
-      padding: 0;
-      .control-group {
-        margin-bottom: 1em;
+    .badge-title {
+      height: 100%;
+      &__saved {
+        color: var(--success);
       }
     }
-  }
 
-  .badge-title .form-horizontal .controls {
-    margin-left: 0;
-  }
+    .control-group:last-child {
+      margin: auto 0 0;
+    }
 
-  .form-horizontal {
-    margin-bottom: 0;
+    .form-horizontal {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      margin: 0;
+    }
+
+    .controls {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: baseline;
+      gap: 0.5em;
+      margin: 0;
+      button:last-of-type {
+        margin-right: auto;
+      }
+    }
+
+    .combobox {
+      width: 100%;
+    }
   }
 }
 

app/assets/stylesheets/mobile/_index.scss

@@ -33,5 +33,4 @@
 @import "topic-post";
 @import "topic";
 @import "upload";
-@import "user-badges";
 @import "user";

app/assets/stylesheets/mobile/user-badges.scss

@@ -1,7 +0,0 @@
-.show-badge-details {
-  margin-bottom: 1em;
-
-  .badge-grant-info {
-    display: none;
-  }
-}