fix: Tweaks to resizing of the homepage (#18850)

frontend/src/lib/components/CompactList/CompactList.scss

@@ -1,31 +1,31 @@
-.compact-list {
+.CompactList {
     border-radius: var(--radius);
     border: 1px solid var(--border);
-    height: calc(19.25rem);
     background: var(--bg-light);
     box-sizing: content-box;
     display: flex;
     flex-direction: column;
     flex: 1;
+    overflow: hidden;
 
-    .compact-list-header {
-        padding: 0.5rem 1rem 0;
+    .CompactList__header {
+        padding: 0.5rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
 
         h3 {
             margin-bottom: 0;
             font-weight: 600;
-            font-size: 1rem;
+            font-size: 0.9rem;
             line-height: 1.4;
         }
     }
 
-    .scrollable-list {
-        flex: 1;
-        overflow: auto;
-        padding: 0 0.5rem;
+    .CompactList__content {
+        overflow-y: auto;
+        height: 16rem;
+        padding: 0.5rem;
     }
 
     .LemonButton {

frontend/src/lib/components/CompactList/CompactList.tsx

@@ -24,15 +24,15 @@ export function CompactList({
     renderRow,
 }: CompactListProps): JSX.Element {
     return (
-        <div className="compact-list border">
-            <div className="compact-list-header">
-                <h3>{title}</h3>
+        <div className="CompactList">
+            <div className="CompactList__header">
+                <h3 className="px-2 truncate" title={title}>
+                    {title}
+                </h3>
                 {viewAllURL && <LemonButton to={viewAllURL}>View all</LemonButton>}
             </div>
-            <div className="mx-2">
-                <LemonDivider />
-            </div>
-            <div className="scrollable-list">
+            <LemonDivider className="my-0 mx-2" />
+            <div className="CompactList__content">
                 {loading ? (
                     <div className="p-2 space-y-6">
                         {Array.from({ length: 6 }, (_, index) => (

frontend/src/scenes/project-homepage/ProjectHomepage.scss

@@ -1,11 +1,13 @@
-.project-homepage {
-    .HomepageDashboardHeader {
+.ProjectHomepage {
+    container-type: inline-size;
+
+    .ProjectHomepage__dashboardheader {
         margin-top: 1rem;
         display: flex;
         justify-content: space-between;
         align-items: center;
 
-        .HomepageDashboardHeader__title {
+        .ProjectHomepage__dashboardheader__title {
             display: flex;
             flex-direction: row;
             align-items: center;
@@ -30,29 +32,12 @@
         }
     }
 
-    .top-list-container-horizontal {
+    .ProjectHomepage__lists {
         display: flex;
+        gap: 1rem;
 
-        .top-list {
-            margin-bottom: 1.5rem;
-
-            .posthog-3000 & {
-                margin-bottom: 0;
-            }
-
-            width: 33%;
-        }
-
-        .spacer {
-            width: 1rem;
-        }
-    }
-
-    .top-list-container-vertical {
-        margin-bottom: 1.5rem;
-
-        .spacer {
-            height: 1rem;
+        @container (max-width: 800px) {
+            flex-direction: column;
         }
     }
 

frontend/src/scenes/project-homepage/ProjectHomepage.tsx

@@ -2,7 +2,6 @@ import './ProjectHomepage.scss'
 
 import { IconHome } from '@posthog/icons'
 import { Link } from '@posthog/lemon-ui'
-import useSize from '@react-hook/size'
 import { useActions, useValues } from 'kea'
 import { PageHeader } from 'lib/components/PageHeader'
 import { SceneDashboardChoiceModal } from 'lib/components/SceneDashboardChoice/SceneDashboardChoiceModal'
@@ -13,7 +12,6 @@ import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { useRef } from 'react'
 import { Dashboard } from 'scenes/dashboard/Dashboard'
 import { dashboardLogic } from 'scenes/dashboard/dashboardLogic'
 import { projectHomepageLogic } from 'scenes/project-homepage/projectHomepageLogic'
@@ -25,8 +23,8 @@ import { urls } from 'scenes/urls'
 
 import { DashboardPlacement } from '~/types'
 
-import { NewlySeenPersons } from './NewlySeenPersons'
 import { RecentInsights } from './RecentInsights'
+import { RecentPersons } from './RecentPersons'
 import { RecentRecordings } from './RecentRecordings'
 
 export function ProjectHomepage(): JSX.Element {
@@ -39,9 +37,6 @@ export function ProjectHomepage(): JSX.Element {
     )
     const { featureFlags } = useValues(featureFlagLogic)
 
-    const topListContainerRef = useRef<HTMLDivElement | null>(null)
-    const [topListContainerWidth] = useSize(topListContainerRef)
-
     const has3000 = featureFlags[FEATURE_FLAGS.POSTHOG_3000]
 
     const headerButtons = (
@@ -60,32 +55,17 @@ export function ProjectHomepage(): JSX.Element {
     )
 
     return (
-        <div className="project-homepage">
+        <div className="ProjectHomepage">
             <PageHeader title={currentTeam?.name || ''} delimited buttons={headerButtons} />
-            <div
-                ref={topListContainerRef}
-                className={
-                    topListContainerWidth && topListContainerWidth < 600
-                        ? 'top-list-container-vertical'
-                        : 'top-list-container-horizontal'
-                }
-            >
-                <div className="top-list">
-                    <RecentInsights />
-                </div>
-                <div className="spacer" />
-                <div className="top-list">
-                    <NewlySeenPersons />
-                </div>
-                <div className="spacer" />
-                <div className="top-list">
-                    <RecentRecordings />
-                </div>
+            <div className="ProjectHomepage__lists">
+                <RecentInsights />
+                <RecentPersons />
+                <RecentRecordings />
             </div>
             {currentTeam?.primary_dashboard ? (
                 <>
-                    <div className="HomepageDashboardHeader">
-                        <div className="HomepageDashboardHeader__title">
+                    <div className="ProjectHomepage__dashboardheader">
+                        <div className="ProjectHomepage__dashboardheader__title">
                             {!dashboard && <LemonSkeleton className="w-20 h-4" />}
                             {dashboard?.name && (
                                 <>

frontend/src/scenes/project-homepage/NewlySeenPersons.tsx → frontend/src/scenes/project-homepage/RecentPersons.tsx

@@ -29,7 +29,7 @@ function PersonRow({ person }: { person: PersonType }): JSX.Element {
     )
 }
 
-export function NewlySeenPersons(): JSX.Element {
+export function RecentPersons(): JSX.Element {
     const { persons, personsLoading } = useValues(projectHomepageLogic)
 
     return (