feat: Refactor and simplify insights css (#18570)

cypress/e2e/insights-navigation-open-directly.cy.ts

@@ -30,7 +30,7 @@ describe('Insights', () => {
         describe('opening a new insight directly', () => {
             it('can open a new trends insight', () => {
                 insight.newInsight('TRENDS')
-                cy.get('.trends-insights-container canvas').should('exist')
+                cy.get('.TrendsInsight canvas').should('exist')
                 cy.get('tr').should('have.length.gte', 2)
             })
 
@@ -52,12 +52,12 @@ describe('Insights', () => {
 
             it('can open a new stickiness insight', () => {
                 insight.newInsight('STICKINESS')
-                cy.get('.trends-insights-container canvas').should('exist')
+                cy.get('.TrendsInsight canvas').should('exist')
             })
 
             it('can open a new lifecycle insight', () => {
                 insight.newInsight('LIFECYCLE')
-                cy.get('.trends-insights-container canvas').should('exist')
+                cy.get('.TrendsInsight canvas').should('exist')
             })
 
             it('can open a new SQL insight', () => {

cypress/e2e/insights-navigation-open-sql-insight-first.cy.ts

@@ -42,7 +42,7 @@ describe('Insights', () => {
 
             it('can open a new trends insight', () => {
                 insight.clickTab('TRENDS')
-                cy.get('.trends-insights-container canvas').should('exist')
+                cy.get('.TrendsInsight canvas').should('exist')
                 cy.get('tr').should('have.length.gte', 2)
                 cy.contains('tr', 'No insight results').should('not.exist')
             })
@@ -65,12 +65,12 @@ describe('Insights', () => {
 
             it('can open a new stickiness insight', () => {
                 insight.clickTab('STICKINESS')
-                cy.get('.trends-insights-container canvas').should('exist')
+                cy.get('.TrendsInsight canvas').should('exist')
             })
 
             it('can open a new lifecycle insight', () => {
                 insight.clickTab('LIFECYCLE')
-                cy.get('.trends-insights-container canvas').should('exist')
+                cy.get('.TrendsInsight canvas').should('exist')
             })
 
             it('can open a new SQL insight', () => {

cypress/e2e/insights-navigation.cy.ts

@@ -62,7 +62,7 @@ describe('Insights', () => {
             cy.get('.DataTable tr').should('have.length.gte', 2)
 
             insight.clickTab('TRENDS')
-            cy.get('.trends-insights-container canvas').should('exist')
+            cy.get('.TrendsInsight canvas').should('exist')
             cy.get('tr').should('have.length.gte', 2)
             cy.contains('tr', 'No insight results').should('not.exist')
 
@@ -73,7 +73,7 @@ describe('Insights', () => {
             cy.get('.DataTable tr').should('have.length.gte', 2)
 
             insight.clickTab('TRENDS')
-            cy.get('.trends-insights-container canvas').should('exist')
+            cy.get('.TrendsInsight canvas').should('exist')
             cy.get('tr').should('have.length.gte', 2)
             cy.contains('tr', 'No insight results').should('not.exist')
         })

frontend/src/exporter/ExportedInsight/ExportedInsight.scss

@@ -8,6 +8,8 @@
     background: var(--bg-light);
     display: flex;
     flex-direction: column;
+    height: 100%;
+    flex: 1;
 
     .ExportedInsight__header {
         padding: 1rem;
@@ -25,23 +27,19 @@
         flex: 1;
         position: relative;
         z-index: 1;
+        display: flex;
+        flex-direction: column;
 
-        .FunnelBarChart {
-            min-height: 50vw;
+        .LemonTable {
+            border: none;
+            border-radius: 0;
+            background: none;
         }
 
-        .InsightViz {
-            position: relative;
-            display: flex;
+        .InsightCard__viz {
+            // We can't use the viewport height, as the screenshotter will resize the height of the window to capture the full content
+            // Instead we try to make it roughly rectangular
             min-height: 50vw;
-
-            > * {
-                flex: 1;
-            }
-
-            .ActionsPie {
-                position: absolute;
-            }
         }
     }
 
@@ -56,31 +54,4 @@
             margin: 0.25rem;
         }
     }
-
-    &.ExportedInsight--fit-screen {
-        height: 100vh;
-        max-height: 100vh;
-
-        .ExportedInsight__content {
-            display: flex;
-            flex-direction: column;
-
-            .FunnelBarChart {
-                height: 100%;
-                max-height: 100%;
-                min-height: auto;
-                flex: 1;
-            }
-
-            .InsightViz {
-                flex: 1;
-                min-height: 100px;
-                max-height: 100%;
-            }
-
-            &.ExportedInsight__content--with-watermark {
-                padding-top: 1rem;
-            }
-        }
-    }
 }

frontend/src/exporter/ExportedInsight/ExportedInsight.tsx

@@ -91,11 +91,7 @@ export function ExportedInsight({
                             <QueriesUnsupportedHere />
                         )
                     ) : (
-                        <FilterBasedCardContent
-                            insight={insight as any}
-                            insightProps={insightLogicProps}
-                            style={{ top: 0, left: 0 }}
-                        />
+                        <FilterBasedCardContent insight={insight as any} insightProps={insightLogicProps} />
                     )}
                     {showLegend ? (
                         <div className="p-4">

frontend/src/exporter/Exporter.scss

@@ -2,6 +2,9 @@
 
 .Exporter {
     padding: 1rem;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 
     &--recording {
         height: 100vh;
@@ -50,11 +53,6 @@ html.export-type-embed {
 
     .Exporter {
         padding: 0;
-
-        // Insights can resize to fit any height, whereas dashboards cannot
-        &--insight {
-            height: 100vh;
-            max-height: 100vh;
-        }
+        min-height: 100vh;
     }
 }

frontend/src/lib/components/Cards/CardMeta.scss

@@ -35,18 +35,23 @@
 }
 
 .CardMeta {
-    position: absolute;
-    top: 0;
-    left: 0;
     display: flex;
+    position: relative;
+    flex-shrink: 0;
     flex-direction: column;
     width: 100%;
     max-height: calc(100% - 2rem);
     background: var(--bg-light);
     z-index: 101; // Elevate above viz
-    overflow: hidden;
     border-radius: var(--radius);
 
+    &--with-details {
+        .CardMeta__top {
+            // Reduced height so that, considering the padding set above, CardMeta__top doesn't have too much margin
+            height: 1.5rem;
+        }
+    }
+
     h5 {
         color: var(--muted);
         line-height: 1.5rem;
@@ -62,44 +67,54 @@
         font-weight: 600;
         margin-bottom: 0.125rem;
     }
-}
-
-.CardMeta--with-details {
-    padding: 1rem;
 
-    .CardMeta__top {
-        // Reduced height so that, considering the padding set above, CardMeta__top doesn't have too much margin
-        height: 1.5rem;
+    .CardMeta__primary {
+        display: flex;
+        width: 100%;
+        padding: 1rem;
     }
-}
 
-.CardMeta--expansion-enter-active,
-.CardMeta--expansion-exit-active,
-.CardMeta--expansion-enter,
-.CardMeta--expansion-exit {
-    transition: box-shadow 200ms ease, height 200ms ease;
-}
+    .CardMeta__divider {
+        margin: 0 1rem;
+        height: 1px;
+        background: var(--border);
+        opacity: 0;
+        transition: opacity 200ms ease;
+    }
 
-.CardMeta--expansion-exit.CardMeta--expansion-exit-active,
-.CardMeta--expansion-exit-done,
-.CardMeta--expansion-enter {
-    box-shadow: none;
-}
+    .CardMeta__details {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 100%;
+        max-height: 18rem;
+        margin-top: -1px; // To cause overlap with the divider when closed
+        border-bottom-width: 1px;
+        background: var(--bg-light);
+        transition: box-shadow 200ms ease, height 200ms ease, margin 200ms ease;
+        overflow-y: auto;
+
+        .CardMeta__details__content {
+            pointer-events: none;
+            overflow-y: auto;
+        }
+    }
 
-.CardMeta--expansion-enter.CardMeta--expansion-enter-active,
-.CardMeta--expansion-enter-done,
-.CardMeta--expansion-exit {
-    box-shadow: var(--shadow-elevation);
-}
+    &.CardMeta--details-shown {
+        .CardMeta__details {
+            box-shadow: var(--shadow-elevation);
+            margin-top: 0;
 
-.CardMeta--expansion-enter-done {
-    overflow: auto;
-}
+            .CardMeta__details__content {
+                opacity: 1;
+                pointer-events: all;
+            }
+        }
 
-.CardMeta__primary {
-    display: flex;
-    width: 100%;
-    margin-bottom: 0.5rem;
+        .CardMeta__divider {
+            opacity: 1;
+        }
+    }
 }
 
 .CardMeta__ribbon {