fix: explore page horizontal alignmenet on larger viewports

Author: capJavert

packages/shared/src/components/Feed.tsx

@@ -106,6 +106,7 @@ export interface FeedProps<T>
   isHorizontal?: boolean;
   feedContainerRef?: React.Ref<HTMLDivElement>;
   disableListFrame?: boolean;
+  topContent?: ReactNode;
 }
 
 interface RankVariables {
@@ -209,6 +210,7 @@ export default function Feed<T>({
   isHorizontal = false,
   feedContainerRef,
   disableListFrame = false,
+  topContent: topContentProp,
 }: FeedProps<T>): ReactElement {
   const origin = Origin.Feed;
   const { logEvent } = useLogContext();
@@ -669,15 +671,17 @@ export default function Feed<T>({
   const containerProps = isSearchPageLaptop
     ? {}
     : {
-        topContent: shouldShowTopHero ? (
-          <TopHero
-            className="pt-2"
-            title={readingReminderTitle}
-            subtitle={readingReminderSubtitle}
-            onCtaClick={() => onEnableHero(NotificationCtaPlacement.TopHero)}
-            onClose={() => onDismissHero(NotificationCtaPlacement.TopHero)}
-          />
-        ) : undefined,
+        topContent:
+          topContentProp ??
+          (shouldShowTopHero ? (
+            <TopHero
+              className="pt-2"
+              title={readingReminderTitle}
+              subtitle={readingReminderSubtitle}
+              onCtaClick={() => onEnableHero(NotificationCtaPlacement.TopHero)}
+              onClose={() => onDismissHero(NotificationCtaPlacement.TopHero)}
+            />
+          ) : undefined),
         header,
         inlineHeader,
         className,

packages/shared/src/components/MainFeedLayout.tsx

@@ -714,9 +714,6 @@ export default function MainFeedLayout({
     <FeedPageLayoutComponent
       className={classNames('relative', disableTopPadding && '!pt-0')}
     >
-      {!!chipsNode && router.pathname === '/explore/[tag]' && (
-        <div className="mb-8 w-full">{chipsNode}</div>
-      )}
       {isAnyExplore && <FeedExploreComponent />}
       {isSearchOn && !isSearchPageLaptop && search}
       {isSearchOn && isFinder && !isSearchPageLaptop && (
@@ -756,6 +753,11 @@ export default function MainFeedLayout({
           <Feed
             {...feedProps}
             shortcuts={shortcuts}
+            topContent={
+              isExploreTag && chipsNode ? (
+                <div className="mb-8 w-full">{chipsNode}</div>
+              ) : undefined
+            }
             className={classNames(
               shouldUseListFeedLayout && !isFinder && 'laptop:px-6',
             )}