From 939d26801ad134567981d332b660eca2f243c30d Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Tue, 14 Sep 2021 14:47:39 +0800
Subject: [PATCH] Wunderbar: re-arrange static buttons to the top

## Issue
7075 Move "explore tags" to a stable position

## Changes
Move the buttons in the suggestions popup to the top row so that it's position won't be constantly changing depending on the number of results.
---
 ui/component/wunderbarSuggestions/view.jsx | 22 ++++++++++++----------
 ui/scss/component/_wunderbar.scss          | 11 +++++++++++
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/ui/component/wunderbarSuggestions/view.jsx b/ui/component/wunderbarSuggestions/view.jsx
index b2f7003c4..68a23d37d 100644
--- a/ui/component/wunderbarSuggestions/view.jsx
+++ b/ui/component/wunderbarSuggestions/view.jsx
@@ -321,16 +321,6 @@ export default function WunderBarSuggestions(props: Props) {
               className={classnames('wunderbar__suggestions', { 'wunderbar__suggestions--mobile': isMobile })}
             >
               <ComboboxList>
-                {uriFromQueryIsValid && !noTopSuggestion ? <WunderbarTopSuggestion query={nameFromQuery} /> : null}
-
-                <div className="wunderbar__label">{__('Search Results')}</div>
-
-                {showPlaceholder && term.length > LIGHTHOUSE_MIN_CHARACTERS ? <Spinner type="small" /> : null}
-
-                {!showPlaceholder && results
-                  ? results.slice(0, isMobile ? 20 : 5).map((uri) => <WunderbarSuggestion key={uri} uri={uri} />)
-                  : null}
-
                 {!noBottomLinks && (
                   <div className="wunderbar__bottom-links">
                     <ComboboxOption value={term} className="wunderbar__more-results">
@@ -344,6 +334,18 @@ export default function WunderBarSuggestions(props: Props) {
                     </ComboboxOption>
                   </div>
                 )}
+
+                <hr className="wunderbar__top-separator" />
+
+                {uriFromQueryIsValid && !noTopSuggestion ? <WunderbarTopSuggestion query={nameFromQuery} /> : null}
+
+                <div className="wunderbar__label">{__('Search Results')}</div>
+
+                {showPlaceholder && term.length > LIGHTHOUSE_MIN_CHARACTERS ? <Spinner type="small" /> : null}
+
+                {!showPlaceholder && results
+                  ? results.slice(0, isMobile ? 20 : 5).map((uri) => <WunderbarSuggestion key={uri} uri={uri} />)
+                  : null}
               </ComboboxList>
             </ComboboxPopover>
           )}
diff --git a/ui/scss/component/_wunderbar.scss b/ui/scss/component/_wunderbar.scss
index 6d88871da..0645b6de7 100644
--- a/ui/scss/component/_wunderbar.scss
+++ b/ui/scss/component/_wunderbar.scss
@@ -264,6 +264,17 @@
   :first-child {
     flex: 1;
   }
+
+  .wunderbar__more-results {
+    margin-top: 0;
+    margin-left: var(--spacing-xxs);
+    margin-bottom: 0;
+
+    @media (min-width: $breakpoint-small) {
+      margin-top: var(--spacing-xxs);
+      margin-bottom: 0;
+    }
+  }
 }
 
 [data-reach-combobox-option] {