Make spacing more relaxed

PostHog · Nov 7, 2023 · 0f1a2c5 · 0f1a2c5
1 parent df9ff80
commit 0f1a2c5
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git 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
@@ -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
             }