chore(web): move dropdown to the left, searchbar to the right

Author: kemuru

web/src/components/CasesDisplay/Search.tsx

@@ -18,7 +18,7 @@ const Container = styled.div`
     () =>
       css`
         flex-direction: row;
-        gap: calc(4px + (24 - 4) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+        gap: calc(4px + (22 - 4) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
       `
   )}
 `;
@@ -43,15 +43,6 @@ const StyledSearchbar = styled(Searchbar)`
   }
 `;
 
-const StyledDropdownCascader = styled(DropdownCascader)`
-  [class*="dropdown-container"] {
-    width: 240px;
-  }
-  [class*="cascader"] {
-    overflow: auto;
-  }
-`;
-
 const Search: React.FC = () => {
   const { page, order, filter } = useParams();
   const location = useRootPath();
@@ -80,16 +71,8 @@ const Search: React.FC = () => {
 
   return (
     <Container>
-      <SearchBarContainer>
-        <StyledSearchbar
-          type="text"
-          placeholder="Search By ID"
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-        />
-      </SearchBarContainer>
       {items ? (
-        <StyledDropdownCascader
+        <DropdownCascader
           items={items}
           placeholder={"Select Court"}
           onSelect={(value) => {
@@ -101,6 +84,14 @@ const Search: React.FC = () => {
       ) : (
         <Skeleton width={240} height={42} />
       )}
+      <SearchBarContainer>
+        <StyledSearchbar
+          type="text"
+          placeholder="Search By ID"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+      </SearchBarContainer>
     </Container>
   );
 };