From 4e30d6cbae45f8e7869b4338ea235dc105c856d7 Mon Sep 17 00:00:00 2001
From: Rohan-cp <rohancp9@icloud.com>
Date: Tue, 2 Apr 2024 19:48:32 -0400
Subject: [PATCH] fixed layout styling

---
 .../Search/SearchDefaultTrendingCurators.tsx          |  2 +-
 .../Search/SearchFeaturedCollectionSection.tsx        |  6 +++---
 .../src/components/Search/SearchFeaturedProfile.tsx   |  1 -
 .../components/Search/SearchSuggestedUsersSection.tsx | 11 ++++++++---
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/Search/SearchDefaultTrendingCurators.tsx b/apps/web/src/components/Search/SearchDefaultTrendingCurators.tsx
index fb64044b04..65a7166fc5 100644
--- a/apps/web/src/components/Search/SearchDefaultTrendingCurators.tsx
+++ b/apps/web/src/components/Search/SearchDefaultTrendingCurators.tsx
@@ -61,7 +61,7 @@ export default function SearchDefaultTrendingCuratorsSection({
     return users;
   }, [query, selectedFilter]);
 
-  const isSelectedFilterCurator = useMemo(() => selectedFilter === 'curator', [selectedFilter]);
+  const isSelectedFilterCurator = useMemo(() => selectedFilter === 'curator');
 
   const handleToggleShowAll = useCallback(() => {
     if (isSelectedFilterCurator) {
diff --git a/apps/web/src/components/Search/SearchFeaturedCollectionSection.tsx b/apps/web/src/components/Search/SearchFeaturedCollectionSection.tsx
index 6bc61b9774..9bc2a38203 100644
--- a/apps/web/src/components/Search/SearchFeaturedCollectionSection.tsx
+++ b/apps/web/src/components/Search/SearchFeaturedCollectionSection.tsx
@@ -1,6 +1,6 @@
 import { CmsTypes } from '~/scenes/ContentPages/cms_types';
 
-import { HStack } from '../core/Spacer/Stack';
+import { VStack, HStack } from '../core/Spacer/Stack';
 import SearchFeaturedProfile from './SearchFeaturedProfile';
 import SearchResultsHeader from './SearchResultsHeader';
 
@@ -11,13 +11,13 @@ type Props = {
 
 export default function SearchFeaturedCollectionSection({ profiles, variant }: Props) {
   return (
-    <>
+    <VStack gap={8}>
       <SearchResultsHeader variant={variant}>Featured Collections</SearchResultsHeader>
       <HStack justify="space-between" style={{ paddingBottom: '12px' }}>
         {profiles?.map((profile) => (
           <SearchFeaturedProfile key={profile.id} profile={profile} />
         ))}
       </HStack>
-    </>
+    </VStack>
   );
 }
diff --git a/apps/web/src/components/Search/SearchFeaturedProfile.tsx b/apps/web/src/components/Search/SearchFeaturedProfile.tsx
index cc33221109..cb3fb0417a 100644
--- a/apps/web/src/components/Search/SearchFeaturedProfile.tsx
+++ b/apps/web/src/components/Search/SearchFeaturedProfile.tsx
@@ -88,7 +88,6 @@ const StyledProfile = styled(VStack)`
 
   @media only screen and ${breakpoints.desktop} {
     min-width: 200px;
-    min-height: 183px;
   }
 `;
 
diff --git a/apps/web/src/components/Search/SearchSuggestedUsersSection.tsx b/apps/web/src/components/Search/SearchSuggestedUsersSection.tsx
index 6b9459ac8d..6166b1d2d6 100644
--- a/apps/web/src/components/Search/SearchSuggestedUsersSection.tsx
+++ b/apps/web/src/components/Search/SearchSuggestedUsersSection.tsx
@@ -1,8 +1,9 @@
 import { graphql, useFragment } from 'react-relay';
 import { useMemo } from 'react';
+import styled from 'styled-components';
 
 import { SearchSuggestedUsersSectionFragment$key } from '~/generated/SearchSuggestedUsersSectionFragment.graphql';
-import { HStack } from '../core/Spacer/Stack';
+import { VStack, HStack } from '../core/Spacer/Stack';
 import SearchResultsHeader from './SearchResultsHeader';
 import SuggestedProfileCard from '../Feed/SuggestedProfileCard';
 
@@ -60,7 +61,7 @@ export default function SearchSuggestedUsersSection({ queryRef, variant }: Props
   }
 
   return (
-    <>
+    <StyledWrapper gap={8}>
       <SearchResultsHeader variant={variant}>Suggested Collectors and Creators</SearchResultsHeader>
       <HStack justify="space-between" style={{ paddingBottom: '12px' }}>
         {nonNullProfiles?.map((profile) => (
@@ -72,6 +73,10 @@ export default function SearchSuggestedUsersSection({ queryRef, variant }: Props
           />
         ))}
       </HStack>
-    </>
+    </StyledWrapper>
   );
 }
+
+const StyledWrapper = styled(VStack)`
+  padding-bottom: 12px;
+`;