From a60767e0037c5897949bc22f0df62a440b1cc909 Mon Sep 17 00:00:00 2001
From: Kunal <kunal@posthog.com>
Date: Tue, 18 May 2021 13:48:35 -0700
Subject: [PATCH] update column width md screens (#4392)

Co-authored-by: kunal <kunal@Kunals-iMac.hsd1.ca.comcast.net>
---
 .../InsightHistoryPanel.tsx                   |  2 +-
 frontend/src/scenes/onboarding/home/Home.scss |  2 +-
 .../home/sections/DiscoverInsight.tsx         | 25 ++++++++++++++++---
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/frontend/src/scenes/insights/InsightHistoryPanel/InsightHistoryPanel.tsx b/frontend/src/scenes/insights/InsightHistoryPanel/InsightHistoryPanel.tsx
index 7212e2d6c03..8adac6c7c8e 100644
--- a/frontend/src/scenes/insights/InsightHistoryPanel/InsightHistoryPanel.tsx
+++ b/frontend/src/scenes/insights/InsightHistoryPanel/InsightHistoryPanel.tsx
@@ -56,7 +56,7 @@ function InsightPane({
             {loading && <Loading />}
             {data &&
                 data.map((insight: DashboardItemType, index: number) => (
-                    <Col xs={24} sm={data.length > 1 ? 8 : 12} key={insight.id} style={{ height: 270 }}>
+                    <Col xs={24} sm={12} md={data.length > 1 ? 8 : 12} key={insight.id} style={{ height: 270 }}>
                         <DashboardItem
                             item={{ ...insight, color: null }}
                             key={insight.id + '_user'}
diff --git a/frontend/src/scenes/onboarding/home/Home.scss b/frontend/src/scenes/onboarding/home/Home.scss
index 27078e7b18c..3254d327503 100644
--- a/frontend/src/scenes/onboarding/home/Home.scss
+++ b/frontend/src/scenes/onboarding/home/Home.scss
@@ -167,7 +167,7 @@
             max-width: 900px;
         }
         @media only screen and (max-width: $md) {
-            max-width: 650px;
+            max-width: 600px;
         }
         @media only screen and (max-width: $sm) {
             max-width: 315px;
diff --git a/frontend/src/scenes/onboarding/home/sections/DiscoverInsight.tsx b/frontend/src/scenes/onboarding/home/sections/DiscoverInsight.tsx
index 0071d55525d..6143fb34d3e 100644
--- a/frontend/src/scenes/onboarding/home/sections/DiscoverInsight.tsx
+++ b/frontend/src/scenes/onboarding/home/sections/DiscoverInsight.tsx
@@ -166,12 +166,20 @@ function RecentInsightList(): JSX.Element {
 }
 
 export function DiscoverInsightsModule(): JSX.Element {
-    const { insights, insightsLoading, teamInsights, teamInsightsLoading } = useValues(insightHistoryLogic)
-    const { loadInsights, loadTeamInsights } = useActions(insightHistoryLogic)
+    const {
+        insights,
+        insightsLoading,
+        teamInsights,
+        teamInsightsLoading,
+        savedInsights,
+        savedInsightsLoading,
+    } = useValues(insightHistoryLogic)
+    const { loadInsights, loadTeamInsights, loadSavedInsights } = useActions(insightHistoryLogic)
 
     useEffect(() => {
         loadInsights()
         loadTeamInsights()
+        loadSavedInsights()
     }, [])
 
     return (
@@ -181,10 +189,19 @@ export function DiscoverInsightsModule(): JSX.Element {
             </Title>
             <Divider />
             <Skeleton
-                loading={insightsLoading && insights.length === 0 && teamInsightsLoading && teamInsights.length === 0}
+                loading={
+                    insightsLoading &&
+                    insights.length === 0 &&
+                    teamInsightsLoading &&
+                    teamInsights.length === 0 &&
+                    savedInsightsLoading &&
+                    savedInsights.length === 0
+                }
             >
                 <Space direction={'vertical'} className={'home-page'} size={'small'}>
-                    {(insights.length > 0 || teamInsights.length > 0) && <RecentInsightList />}
+                    {(insights.length > 0 || teamInsights.length > 0 || savedInsights.length > 0) && (
+                        <RecentInsightList />
+                    )}
                     <CreateAnalysisSection />
                 </Space>
             </Skeleton>