From 75b402f07c4b0eed2d72fb1da142d902786bb7a1 Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Tue, 27 Jun 2023 12:52:42 +0800
Subject: [PATCH] UX: Fix position of filters in edit categories/tags nav menu
 modals (#22292)

Why this change?

We want the position of the filters to remain fixed when scrolling
through the list of categories or tags. Otherwise, the user has to
scroll all the way back to othe top in order to access the filters when
the list of categories or tags is large.
---
 .../edit-navigation-modal-form/modal.hbs      | 56 ++++++-------
 .../edit-navigation-modal-form/modal.scss     | 79 +++++++++----------
 .../edit-navigation-modal-form/modal.scss     | 13 +--
 3 files changed, 74 insertions(+), 74 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/modal.hbs b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/modal.hbs
index 5a8aecc81c3..e7626cf5cc5 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/modal.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/modal.hbs
@@ -11,39 +11,39 @@
   </p>
 {{/in-element}}
 
+<div class="sidebar__edit-navigation-modal-form__filter">
+  <div class="sidebar__edit-navigation-modal-form__filter-input">
+    {{d-icon
+      "search"
+      class="sidebar__edit-navigation-modal-form__filter-input-icon"
+    }}
+
+    <Input
+      class="sidebar__edit-navigation-modal-form__filter-input-field"
+      placeholder={{@inputFilterPlaceholder}}
+      @type="text"
+      @value={{this.filter}}
+      {{on "input" (action @onFilterInput value="target.value")}}
+      autofocus="true"
+    />
+  </div>
+
+  <div class="sidebar__edit-navigation-modal-form__filter-dropdown-wrapper">
+    <DropdownSelectBox
+      @class="sidebar__edit-navigation-modal-form__filter-dropdown"
+      @value={{this.filterDropdownValue}}
+      @content={{this.filterDropdownContent}}
+      @onChange={{this.onFilterDropdownChange}}
+      @options={{hash showCaret=true}}
+    />
+  </div>
+</div>
+
 <div class="sidebar__edit-navigation-modal-form">
   <DModalBody
     @title={{@title}}
     @class="sidebar__edit-navigation-modal-form__body"
   >
-    <div class="sidebar__edit-navigation-modal-form__filter">
-      <div class="sidebar__edit-navigation-modal-form__filter-input">
-        {{d-icon
-          "search"
-          class="sidebar__edit-navigation-modal-form__filter-input-icon"
-        }}
-
-        <Input
-          class="sidebar__edit-navigation-modal-form__filter-input-field"
-          placeholder={{@inputFilterPlaceholder}}
-          @type="text"
-          @value={{this.filter}}
-          {{on "input" (action @onFilterInput value="target.value")}}
-          autofocus="true"
-        />
-      </div>
-
-      <div class="sidebar__edit-navigation-modal-form__filter-dropdown-wrapper">
-        <DropdownSelectBox
-          @class="sidebar__edit-navigation-modal-form__filter-dropdown"
-          @value={{this.filterDropdownValue}}
-          @content={{this.filterDropdownContent}}
-          @onChange={{this.onFilterDropdownChange}}
-          @options={{hash showCaret=true}}
-        />
-      </div>
-    </div>
-
     {{yield}}
   </DModalBody>
 </div>
diff --git a/app/assets/stylesheets/common/components/sidebar/edit-navigation-modal-form/modal.scss b/app/assets/stylesheets/common/components/sidebar/edit-navigation-modal-form/modal.scss
index 8a6925e33ad..c013b1bc085 100644
--- a/app/assets/stylesheets/common/components/sidebar/edit-navigation-modal-form/modal.scss
+++ b/app/assets/stylesheets/common/components/sidebar/edit-navigation-modal-form/modal.scss
@@ -2,60 +2,59 @@
   .modal-body {
     min-height: 50vh;
   }
+}
 
-  .sidebar__edit-navigation-modal-form__filter {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 1em;
-    width: 100%;
+.sidebar__edit-navigation-modal-form__filter {
+  display: flex;
+  flex-direction: row;
+  padding: 1em 1em 0 1em;
 
-    .sidebar__edit-navigation-modal-form__filter-dropdown {
-      margin-left: 0.5em;
+  .sidebar__edit-navigation-modal-form__filter-dropdown {
+    margin-left: 0.5em;
 
-      .select-kit-header {
+    .select-kit-header {
+      background: var(--secondary);
+      color: var(--primary);
+      border: 1px solid var(--primary-low-mid);
+      font-size: var(--font-0);
+
+      &:hover,
+      &:focus {
         background: var(--secondary);
         color: var(--primary);
-        border: 1px solid var(--primary-low-mid);
-        font-size: var(--font-0);
 
-        &:hover,
-        &:focus {
-          background: var(--secondary);
+        .d-icon {
           color: var(--primary);
-
-          .d-icon {
-            color: var(--primary);
-          }
         }
       }
     }
+  }
 
-    .sidebar__edit-navigation-modal-form__filter-input {
-      display: flex;
-      flex-direction: row;
-      margin-right: auto;
-      width: 100%;
-      position: relative;
-    }
+  .sidebar__edit-navigation-modal-form__filter-input {
+    display: flex;
+    flex-direction: row;
+    margin-right: auto;
+    width: 100%;
+    position: relative;
+  }
 
-    .sidebar__edit-navigation-modal-form__filter-input-icon {
-      position: absolute;
-      left: 0.5em;
-      top: 0.65em;
-      color: var(--primary-low-mid);
-    }
+  .sidebar__edit-navigation-modal-form__filter-input-icon {
+    position: absolute;
+    left: 0.5em;
+    top: 0.65em;
+    color: var(--primary-low-mid);
+  }
 
-    .sidebar__edit-navigation-modal-form__filter-input-field {
-      border-color: var(--primary-low-mid);
-      padding-left: 1.75em;
-      width: 100%;
+  .sidebar__edit-navigation-modal-form__filter-input-field {
+    border-color: var(--primary-low-mid);
+    padding-left: 1.75em;
+    width: 100%;
 
-      &:focus {
-        border-color: var(--tertiary);
-        outline: none;
-        outline-offset: 0;
-        box-shadow: inset 0px 0px 0px 1px var(--tertiary);
-      }
+    &:focus {
+      border-color: var(--tertiary);
+      outline: none;
+      outline-offset: 0;
+      box-shadow: inset 0px 0px 0px 1px var(--tertiary);
     }
   }
 }
diff --git a/app/assets/stylesheets/mobile/components/sidebar/edit-navigation-modal-form/modal.scss b/app/assets/stylesheets/mobile/components/sidebar/edit-navigation-modal-form/modal.scss
index fa66f27aed3..571dfe74694 100644
--- a/app/assets/stylesheets/mobile/components/sidebar/edit-navigation-modal-form/modal.scss
+++ b/app/assets/stylesheets/mobile/components/sidebar/edit-navigation-modal-form/modal.scss
@@ -2,13 +2,14 @@
   .modal-inner-container {
     width: 35em;
   }
+}
 
-  .sidebar__edit-navigation-modal-form__filter {
-    flex-direction: column;
+.sidebar__edit-navigation-modal-form__filter {
+  flex-direction: column;
+  padding: 0.667em;
 
-    .sidebar__edit-navigation-modal-form__filter-dropdown {
-      margin-left: 0;
-      width: 100%;
-    }
+  .sidebar__edit-navigation-modal-form__filter-dropdown {
+    margin-left: 0;
+    width: 100%;
   }
 }