Chart above fold (PostHog#3142)

* Update TrendInsight minHeight to keep chart above the fold

* Refactor Insights main content for clarity

* Fix PostHog FOSS sync

* Remove extraneous div

Author: Twixes

.github/workflows/posthog-foss.yml

@@ -25,11 +25,11 @@ jobs:
                   ref: master
                   token: ${{ secrets.SYNC_GITHUB_TOKEN }} # SYNC_GITHUB_TOKEN is a PAT token with the workflows scope which is not in GITHUB_TOKEN
             - name: Commit "Sync and remove all non-FOSS parts"
-              uses: EndBug/add-and-commit@v4
+              uses: EndBug/add-and-commit@v7
               with:
                   author_name: PostHog Bot
                   author_email: [email protected]
                   message: 'Sync and remove all non-FOSS parts'
-                  remove: ['-r ee/', '-r .github/']
+                  remove: '["-r ee/", "-r .github/"]'
               env:
                   GITHUB_TOKEN: ${{ secrets.SYNC_GITHUB_TOKEN }}

frontend/src/scenes/insights/Insights.js

@@ -263,44 +263,29 @@ function _Insights() {
                                     }
                                     headStyle={{ backgroundColor: 'rgba(0,0,0,.03)' }}
                                 >
-                                    <div>
-                                        {showErrorMessage ? (
-                                            <ErrorMessage />
-                                        ) : (
-                                            showTimeoutMessage && <TimeOut isLoading={isLoading} />
-                                        )}
-                                        <div
-                                            style={{
-                                                display: showErrorMessage || showTimeoutMessage ? 'none' : 'block',
-                                            }}
-                                        >
-                                            {featureFlags['remove-shownas']
-                                                ? {
-                                                      [`${ViewType.TRENDS}`]: <TrendInsight view={ViewType.TRENDS} />,
-                                                      [`${ViewType.STICKINESS}`]: (
-                                                          <TrendInsight view={ViewType.STICKINESS} />
-                                                      ),
-                                                      [`${ViewType.LIFECYCLE}`]: (
-                                                          <TrendInsight view={ViewType.LIFECYCLE} />
-                                                      ),
-                                                      [`${ViewType.SESSIONS}`]: (
-                                                          <TrendInsight view={ViewType.SESSIONS} />
-                                                      ),
-                                                      [`${ViewType.FUNNELS}`]: <FunnelInsight />,
-                                                      [`${ViewType.RETENTION}`]: <RetentionContainer />,
-                                                      [`${ViewType.PATHS}`]: <Paths />,
-                                                  }[activeView]
-                                                : {
-                                                      [`${ViewType.TRENDS}`]: <TrendInsight view={ViewType.TRENDS} />,
-                                                      [`${ViewType.SESSIONS}`]: (
-                                                          <TrendInsight view={ViewType.SESSIONS} />
-                                                      ),
-                                                      [`${ViewType.FUNNELS}`]: <FunnelInsight />,
-                                                      [`${ViewType.RETENTION}`]: <RetentionContainer />,
-                                                      [`${ViewType.PATHS}`]: <Paths />,
-                                                  }[activeView]}
-                                        </div>
-                                    </div>
+                                    {showErrorMessage ? (
+                                        <ErrorMessage />
+                                    ) : showTimeoutMessage ? (
+                                        <TimeOut isLoading={isLoading} />
+                                    ) : featureFlags['remove-shownas'] ? (
+                                        {
+                                            [`${ViewType.TRENDS}`]: <TrendInsight view={ViewType.TRENDS} />,
+                                            [`${ViewType.STICKINESS}`]: <TrendInsight view={ViewType.STICKINESS} />,
+                                            [`${ViewType.LIFECYCLE}`]: <TrendInsight view={ViewType.LIFECYCLE} />,
+                                            [`${ViewType.SESSIONS}`]: <TrendInsight view={ViewType.SESSIONS} />,
+                                            [`${ViewType.FUNNELS}`]: <FunnelInsight />,
+                                            [`${ViewType.RETENTION}`]: <RetentionContainer />,
+                                            [`${ViewType.PATHS}`]: <Paths />,
+                                        }[activeView]
+                                    ) : (
+                                        {
+                                            [`${ViewType.TRENDS}`]: <TrendInsight view={ViewType.TRENDS} />,
+                                            [`${ViewType.SESSIONS}`]: <TrendInsight view={ViewType.SESSIONS} />,
+                                            [`${ViewType.FUNNELS}`]: <FunnelInsight />,
+                                            [`${ViewType.RETENTION}`]: <RetentionContainer />,
+                                            [`${ViewType.PATHS}`]: <Paths />,
+                                        }[activeView]
+                                    )}
                                 </Card>
                                 {!showErrorMessage && !showTimeoutMessage && activeView === ViewType.FUNNELS && (
                                     <Card>
@@ -324,7 +309,7 @@ function TrendInsight({ view }) {
             {(_filters.actions || _filters.events || _filters.session) && (
                 <div
                     style={{
-                        minHeight: '70vh',
+                        minHeight: 'calc(90vh - 16rem)',
                         position: 'relative',
                     }}
                 >