fixed layout styling

gallery-so · Apr 2, 2024 · 4e30d6c · 4e30d6c
1 parent 5e640d0
commit 4e30d6c
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+`;