diff --git a/frontend/__snapshots__/components-compact-list--compact-list.png b/frontend/__snapshots__/components-compact-list--compact-list.png index 49cbfb2048571..1ab5cccecf7f1 100644 Binary files a/frontend/__snapshots__/components-compact-list--compact-list.png and b/frontend/__snapshots__/components-compact-list--compact-list.png differ diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png index cb3513e97394d..9c4e289199783 100644 Binary files a/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png and b/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png differ diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png index d42c385e3c023..a0e2068387f91 100644 Binary files a/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png and b/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png differ diff --git a/frontend/__snapshots__/scenes-app-feature-flags--edit-feature-flag.png b/frontend/__snapshots__/scenes-app-feature-flags--edit-feature-flag.png index 9fe8b83975eb5..af83f781707c8 100644 Binary files a/frontend/__snapshots__/scenes-app-feature-flags--edit-feature-flag.png and b/frontend/__snapshots__/scenes-app-feature-flags--edit-feature-flag.png differ diff --git a/frontend/__snapshots__/scenes-app-feature-flags--edit-multi-variate-feature-flag.png b/frontend/__snapshots__/scenes-app-feature-flags--edit-multi-variate-feature-flag.png index 4638e3c252629..e2d2e1bbd2679 100644 Binary files a/frontend/__snapshots__/scenes-app-feature-flags--edit-multi-variate-feature-flag.png and b/frontend/__snapshots__/scenes-app-feature-flags--edit-multi-variate-feature-flag.png differ diff --git a/frontend/__snapshots__/scenes-app-project-homepage--project-homepage.png b/frontend/__snapshots__/scenes-app-project-homepage--project-homepage.png index e68bb4406ab67..b7a45b2b53c70 100644 Binary files a/frontend/__snapshots__/scenes-app-project-homepage--project-homepage.png and b/frontend/__snapshots__/scenes-app-project-homepage--project-homepage.png differ diff --git a/frontend/src/lib/components/CompactList/CompactList.scss b/frontend/src/lib/components/CompactList/CompactList.scss index 5c0e76c6093a3..6d8877a087898 100644 --- a/frontend/src/lib/components/CompactList/CompactList.scss +++ b/frontend/src/lib/components/CompactList/CompactList.scss @@ -1,15 +1,15 @@ -.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; @@ -17,15 +17,15 @@ 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 { diff --git a/frontend/src/lib/components/CompactList/CompactList.tsx b/frontend/src/lib/components/CompactList/CompactList.tsx index eaa3f392c1013..826ef799b1038 100644 --- a/frontend/src/lib/components/CompactList/CompactList.tsx +++ b/frontend/src/lib/components/CompactList/CompactList.tsx @@ -24,15 +24,15 @@ export function CompactList({ renderRow, }: CompactListProps): JSX.Element { return ( -
-
-

{title}

+
+
+

+ {title} +

{viewAllURL && View all}
-
- -
-
+ +
{loading ? (
{Array.from({ length: 6 }, (_, index) => ( diff --git a/frontend/src/scenes/project-homepage/ProjectHomepage.scss b/frontend/src/scenes/project-homepage/ProjectHomepage.scss index f905c0241e4a4..33df45806bc54 100644 --- a/frontend/src/scenes/project-homepage/ProjectHomepage.scss +++ b/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; } } diff --git a/frontend/src/scenes/project-homepage/ProjectHomepage.tsx b/frontend/src/scenes/project-homepage/ProjectHomepage.tsx index ef77e7b65ef86..383d73fae8125 100644 --- a/frontend/src/scenes/project-homepage/ProjectHomepage.tsx +++ b/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(null) - const [topListContainerWidth] = useSize(topListContainerRef) - const has3000 = featureFlags[FEATURE_FLAGS.POSTHOG_3000] const headerButtons = ( @@ -60,32 +55,17 @@ export function ProjectHomepage(): JSX.Element { ) return ( -
+
-
-
- -
-
-
- -
-
-
- -
+
+ + +
{currentTeam?.primary_dashboard ? ( <> -
-
+
+
{!dashboard && } {dashboard?.name && ( <> diff --git a/frontend/src/scenes/project-homepage/NewlySeenPersons.tsx b/frontend/src/scenes/project-homepage/RecentPersons.tsx similarity index 97% rename from frontend/src/scenes/project-homepage/NewlySeenPersons.tsx rename to frontend/src/scenes/project-homepage/RecentPersons.tsx index 8df69f2bc4697..d66987da1f25a 100644 --- a/frontend/src/scenes/project-homepage/NewlySeenPersons.tsx +++ b/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 (