UX: minor categories reorder fixes (#27249)

app/assets/javascripts/discourse/app/components/modal/reorder-categories.hbs

@@ -8,11 +8,19 @@
     <table>
       <thead>
         <th>{{i18n "categories.category"}}</th>
-        <th>{{i18n "categories.reorder.position"}}</th>
+        <th class="reorder-categories__header-position">
+          {{i18n "categories.reorder.position"}}
+        </th>
       </thead>
       <tbody>
         {{#each this.sortedEntries as |entry|}}
-          <tr data-category-id={{entry.category.id}}>
+          <tr
+            data-category-id={{entry.category.id}}
+            class={{if
+              (eq this.highlightedCategoryId entry.category.id)
+              "highlighted"
+            }}
+          >
             <td>
               <div class={{concat "reorder-categories-depth-" entry.depth}}>
                 {{category-badge entry.category allowUncategorized="true"}}

app/assets/javascripts/discourse/app/components/modal/reorder-categories.js

@@ -21,6 +21,7 @@ export default class ReorderCategories extends Component {
 
   @tracked changed = false;
   @tracked entries = this.reorder();
+  @tracked highlightedCategoryId = null;
 
   get sortedEntries() {
     return this.entries.sortBy("position");
@@ -135,6 +136,18 @@ export default class ReorderCategories extends Component {
 
     this.entries = this.reorder(this.sortedEntries);
     this.changed = true;
+
+    this.toggleHighlight(entry.category.id);
+  }
+
+  @action
+  toggleHighlight(categoryId) {
+    this.highlightedCategoryId = categoryId;
+    setTimeout(() => {
+      if (this.highlightedCategoryId === categoryId) {
+        this.highlightedCategoryId = null;
+      }
+    }, 3000);
   }
 
   @action

app/assets/javascripts/select-kit/addon/components/categories-admin-dropdown.js

@@ -12,6 +12,7 @@ export default DropdownSelectBoxComponent.extend({
     autoFilterable: false,
     filterable: false,
     none: "select_kit.components.categories_admin_dropdown.title",
+    focusAfterOnChange: false,
   },
 
   content: computed(function () {

app/assets/stylesheets/common/base/reorder-categories.scss

@@ -11,6 +11,7 @@
   }
 
   table {
+    width: 100%;
     padding-bottom: 150px;
     margin: 0 0.667em;
     td {
@@ -28,10 +29,15 @@
       max-width: 30vw;
     }
   }
+
+  &__header-position {
+    text-align: right;
+  }
 }
 
 .reorder-categories-actions {
   display: flex;
+  justify-content: end;
   gap: 0.5rem;
 }