diff --git a/frontend/src/layout/navigation-3000/components/Breadcrumbs.scss b/frontend/src/layout/navigation-3000/components/Breadcrumbs.scss index b4346b54b1b017..c9f5992804cf34 100644 --- a/frontend/src/layout/navigation-3000/components/Breadcrumbs.scss +++ b/frontend/src/layout/navigation-3000/components/Breadcrumbs.scss @@ -43,7 +43,8 @@ .Breadcrumbs3000__here { position: relative; line-height: 1.2; - margin: calc(0.125rem * (1 - var(--breadcrumbs-compaction-rate))) 0 0; + margin: calc(0.25rem * (1 - var(--breadcrumbs-compaction-rate))) 0 + calc(0.125rem * (1 - var(--breadcrumbs-compaction-rate))); font-size: 1rem; font-weight: 700; overflow: hidden; diff --git a/frontend/src/layout/navigation-3000/components/Breadcrumbs.tsx b/frontend/src/layout/navigation-3000/components/Breadcrumbs.tsx index edd2583e12ce4f..ff04d2c0724562 100644 --- a/frontend/src/layout/navigation-3000/components/Breadcrumbs.tsx +++ b/frontend/src/layout/navigation-3000/components/Breadcrumbs.tsx @@ -9,7 +9,7 @@ import { Popover } from 'lib/lemon-ui/Popover/Popover' import { breadcrumbsLogic } from '~/layout/navigation/Breadcrumbs/breadcrumbsLogic' import { LemonSkeleton } from '@posthog/lemon-ui' -const COMPACTION_DISTANCE = 32 +const COMPACTION_DISTANCE = 44 /** * In PostHog 3000 breadcrumbs also serve as the top bar. This is marked by theses two features: @@ -37,7 +37,6 @@ export function Breadcrumbs(): JSX.Element | null { className="Breadcrumbs3000" style={ { - // eslint-disable-line react/forbid-dom-props '--breadcrumbs-compaction-rate': compactionRate, } as React.CSSProperties }