Move search and sort/filter options in one line on mobile

web/components/contract-search.tsx

@@ -82,17 +82,15 @@ export function ContractSearch(props: {
         additionalFilter?.tag ?? additionalFilter?.creatorId ?? ''
       }`}
     >
-      <Row className="flex-wrap gap-2">
+      <Row className="gap-1 sm:gap-2">
         <SearchBox
           className="flex-1"
           classNames={{
             form: 'before:top-6',
-            input: '!pl-10 !input !input-bordered shadow-none',
+            input: '!pl-10 !input !input-bordered shadow-none w-[100px]',
-            resetIcon: 'mt-2',
+            resetIcon: 'mt-2 hidden sm:flex',
           }}
-          placeholder="Search markets"
         />
-        <Row className="mt-2 gap-2 sm:mt-0">
         <select
           className="!select !select-bordered"
           value={filter}
@@ -110,26 +108,23 @@ export function ContractSearch(props: {
           }}
         />
       </Row>
-      </Row>
+
-      <div>
+      <Spacer h={3} />
+
       {showCategorySelector && (
-          <>
-            <Spacer h={4} />
         <CategorySelector
+          className="mb-2"
           user={user}
           category={category}
           setCategory={setCategory}
         />
-          </>
       )}
-        <Spacer h={4} />
 
       <ContractSearchInner
         querySortOptions={querySortOptions}
         filter={filter}
         additionalFilter={{ category, ...additionalFilter }}
       />
-      </div>
     </InstantSearch>
   )
 }

web/components/contract/contracts-list.tsx

@@ -37,7 +37,7 @@ export function ContractsGrid(props: {
 
   return (
     <Col className="gap-8">
-      <ul className="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
+      <ul className="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
         {contracts.map((contract) => (
           <ContractCard
             contract={contract}