Merge pull request #1388 from prezly/feature/dev-22109-layuout-bug-in-new-preview

[DEV-22109] Fix - Preview bug on categories page

Author: fgyimah

src/components/StoryCards/PlaceholderStoryCard.module.scss

@@ -44,10 +44,17 @@ $image-height: 400px;
         justify-content: center;
         background-color: var(--prezly-background-color-intermediate);
         border: 1px solid var(--prezly-border-color);
-        min-width: $image-width;
         height: $image-height;
         flex-shrink: 0;
         color: var(--prezly-text-color);
+
+        &.isCategoryPage {
+            min-width: $image-width;
+        }
+
+        &:not(.isCategoryPage) {
+            max-width: $image-width;
+        }
     }
 
     .content {

src/components/StoryCards/PlaceholderStoryCard.tsx

@@ -10,13 +10,15 @@ import styles from './PlaceholderStoryCard.module.scss';
 interface Props {
     title: string;
     description: string;
+    isCategoryPage?: boolean;
     isHighlight?: boolean;
     hasStories?: boolean;
 }
 
 export function PlaceholderStoryCard({
     title,
     description,
+    isCategoryPage = false,
     isHighlight = false,
     hasStories = false,
 }: Props) {
@@ -25,7 +27,10 @@ export function PlaceholderStoryCard({
 
     return (
         <a
-            className={classNames(styles.wrapper, { [styles.highlight]: isHighlight })}
+            className={classNames(styles.wrapper, {
+                [styles.highlight]: isHighlight,
+                [styles.categoryPage]: isCategoryPage,
+            })}
             href={storiesUrl}
             onClick={() => analytics.track(PREVIEW.CREATE_STORY_CLICKED)}
             rel="noopener noreferrer"

src/modules/InfiniteStories/StoriesList.tsx

@@ -80,9 +80,10 @@ export function StoriesList({
     const hasCategories = categories.length > 0;
     const hasStories = stories.length > 0;
     const isPreview = isPreviewActive();
+    const totalStories = newsrooms.reduce((total, newsroom) => newsroom.stories_number + total, 0);
 
     const [highlightedStories, restStories] = useMemo(() => {
-        if (isPreview && stories.length < 3) {
+        if (isPreview && totalStories < 3) {
             if (isCategoryList) {
                 const placeholders = PLACEHOLDER_STORIES
                     // Do not show the "Write your first Prezly story" placeholder in this case.
@@ -123,7 +124,7 @@ export function StoriesList({
         }
 
         return [stories.slice(0, 1), stories.slice(1)];
-    }, [hasCategories, isCategoryList, stories, isPreview]);
+    }, [hasCategories, isCategoryList, stories, isPreview, totalStories]);
 
     const getStoryCardSize = useStoryCardLayout(isCategoryList);
 
@@ -209,6 +210,7 @@ export function StoriesList({
                                     description={story.description}
                                     title={story.title}
                                     hasStories={hasStories}
+                                    isCategoryPage={isCategoryList}
                                 />
                             );
                         }
@@ -263,6 +265,7 @@ export function StoriesList({
                                     description={story.description}
                                     title={story.title}
                                     hasStories={hasStories}
+                                    isCategoryPage={isCategoryList}
                                 />
                             );
                         }