From 737715e1e3f63155327975cd02ad2cafe0f74546 Mon Sep 17 00:00:00 2001
From: Camila Sosa Morales <camisosa@fleek.xyz>
Date: Mon, 24 Apr 2023 18:22:26 -0300
Subject: [PATCH] styles: fix dropdown sorting styles (#238)

---
 ui/src/components/core/combobox/dropdown.tsx              | 4 ++--
 ui/src/views/explore/explore-list/nfa-search.fragment.tsx | 4 ++--
 ui/src/views/explore/explore-list/nfa-search.styles.ts    | 4 ++++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/core/combobox/dropdown.tsx b/ui/src/components/core/combobox/dropdown.tsx
index c3d5baf..abf80ed 100644
--- a/ui/src/components/core/combobox/dropdown.tsx
+++ b/ui/src/components/core/combobox/dropdown.tsx
@@ -96,7 +96,7 @@ const DropdownButton: React.FC<DropdownButtonProps> = ({
         {selectedValue && selectedValue.label ? selectedValue.label : 'Select'}
       </span>
       <span
-        className={`pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4 ${textColorCss}`}
+        className={`pointer-events-none absolute top-1 bottom-0 right-0 flex items-center pr-4 ${textColorCss}`}
       >
         <Icon name="chevron-down" />
       </span>
@@ -172,7 +172,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
             leaveTo="opacity-0"
           >
             <Listbox.Options
-              className={`absolute mt-1 max-h-32 ${width} right-0 z-10 overflow-auto rounded-xl bg-black px-3 pt-2 border-solid  border-slate6  border text-base focus:outline-none sm:text-sm`}
+              className={`absolute mt-1 max-h-36 ${width} right-0 z-10 overflow-auto rounded-xl bg-black px-3 pt-2 border-solid  border-slate6  border text-base focus:outline-none sm:text-sm`}
             >
               {items.map((option: DropdownItem) => (
                 <DropdownOption key={option.value} option={option} />
diff --git a/ui/src/views/explore/explore-list/nfa-search.fragment.tsx b/ui/src/views/explore/explore-list/nfa-search.fragment.tsx
index 8db2396..91b9c82 100644
--- a/ui/src/views/explore/explore-list/nfa-search.fragment.tsx
+++ b/ui/src/views/explore/explore-list/nfa-search.fragment.tsx
@@ -9,8 +9,8 @@ import { NFASearchFragmentStyles as S } from './nfa-search.styles';
 const orderResults: DropdownItem[] = [
   { value: 'newest', label: 'Newest' },
   { value: 'oldest', label: 'Oldest' },
-  { value: 'a-z', label: 'Name A-Z' },
-  { value: 'z-a', label: 'Name Z-A' },
+  { value: 'a-z', label: 'Sort A-Z' },
+  { value: 'z-a', label: 'Sort Z-A' },
 ];
 
 export const NFASearchFragment: React.FC = () => {
diff --git a/ui/src/views/explore/explore-list/nfa-search.styles.ts b/ui/src/views/explore/explore-list/nfa-search.styles.ts
index 2c9d069..a30dcff 100644
--- a/ui/src/views/explore/explore-list/nfa-search.styles.ts
+++ b/ui/src/views/explore/explore-list/nfa-search.styles.ts
@@ -31,6 +31,10 @@ export const NFASearchFragmentStyles = {
       width: '100%',
       maxWidth: '30rem',
       justifySelf: 'center',
+
+      button: {
+        minWidth: '$28',
+      },
     }),
   },
 };