From 56478166e5c124befb6fd43ac3a51e8bd88ddf72 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Thu, 22 Nov 2018 17:09:45 +0100
Subject: [PATCH] FIX: broken badge groupings modal UI (#6653)

---
 .../modal/admin-edit-badge-groupings.hbs         | 16 +++++++++-------
 app/assets/stylesheets/common/admin/badges.scss  | 15 ++++++++++++---
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/admin/templates/modal/admin-edit-badge-groupings.hbs b/app/assets/javascripts/admin/templates/modal/admin-edit-badge-groupings.hbs
index 22a87af0df1..3776f949fbe 100644
--- a/app/assets/javascripts/admin/templates/modal/admin-edit-badge-groupings.hbs
+++ b/app/assets/javascripts/admin/templates/modal/admin-edit-badge-groupings.hbs
@@ -2,13 +2,15 @@
   <div>
     <ul class='badge-groupings'>
     {{#each workingCopy as |wc|}}
-      <li>
-        {{#if wc.editing}}
-          {{input value=wc.name}}
-          <button {{action "save" wc}} class="btn no-text">{{d-icon 'check'}}</button>
-        {{else}}
-          {{wc.displayName}}
-        {{/if}}
+      <li class="badge-grouping-item">
+        <div class="badge-grouping">
+          {{#if wc.editing}}
+            {{input value=wc.name class="badge-grouping-name-input"}}
+            <button {{action "save" wc}} class="btn no-text">{{d-icon 'check'}}</button>
+          {{else}}
+            {{wc.displayName}}
+          {{/if}}
+        </div>
         <div class='actions'>
           <button {{action "edit" wc}} class="btn no-text" disabled={{wc.system}}>{{d-icon 'pencil'}}</button>
           <button {{action "up" wc}} class="btn no-text">{{d-icon 'toggle-up'}}</button>
diff --git a/app/assets/stylesheets/common/admin/badges.scss b/app/assets/stylesheets/common/admin/badges.scss
index 505c5ed5eb7..399226d7699 100644
--- a/app/assets/stylesheets/common/admin/badges.scss
+++ b/app/assets/stylesheets/common/admin/badges.scss
@@ -126,11 +126,20 @@
   list-style: none;
   margin: 0;
   padding: 10px 3px;
-  li {
-    padding: 6px 0;
-    width: 600px;
+
+  .badge-grouping-item {
     border-bottom: 1px solid #dfdfdf;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
+
+  .badge-grouping {
+    .badge-grouping-name-input {
+      margin: 0;
+    }
+  }
+
   .actions {
     float: right;
     .btn {