From 43555bfc5eeb9c37e1f6a1616810cf7c4c4062be Mon Sep 17 00:00:00 2001
From: Ady <121881917+ctrl-alter-ego@users.noreply.github.com>
Date: Wed, 4 Sep 2024 12:55:35 +0100
Subject: [PATCH] fix: #24553 gives header buttons more room when editing
 titles (#24755)

Co-authored-by: adyh <adyharold+posthog@gmail.com>
Co-authored-by: Michael Matloka <michael@posthog.com>
---
 .../navigation-3000/components/TopBar.scss    | 21 ++++++++++++++++---
 .../navigation-3000/components/TopBar.tsx     | 16 ++++++--------
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/frontend/src/layout/navigation-3000/components/TopBar.scss b/frontend/src/layout/navigation-3000/components/TopBar.scss
index 1628b3135ea86..3f05046fa8599 100644
--- a/frontend/src/layout/navigation-3000/components/TopBar.scss
+++ b/frontend/src/layout/navigation-3000/components/TopBar.scss
@@ -49,9 +49,14 @@
 .TopBar3000__trail {
     display: flex;
     align-items: center;
-    height: 1rem;
     margin-top: calc(0.25rem * (1 - var(--breadcrumbs-compaction-rate)));
     overflow: visible;
+
+    .TopBar3000:not(.TopBar3000--compact) & {
+        // 1rem of trail height ensures nice tight spacing in the full or transitioning state,
+        // but we don't want it in the compact state, as it causes title edit buttons to be cut off at top&bottom
+        height: 1rem;
+    }
 }
 
 .TopBar3000__here {
@@ -65,7 +70,12 @@
     font-size: 1rem;
     font-weight: 700;
     line-height: 1.2;
-    visibility: var(--breadcrumbs-title-large-visibility);
+
+    .TopBar3000--compact & {
+        // It wouldn't be necessary to set visibility, but for some reason without this positioning
+        // of breadcrumbs becomes borked when entering title editing mode
+        visibility: hidden;
+    }
 
     > * {
         position: absolute;
@@ -90,7 +100,12 @@
     &.TopBar3000__breadcrumb--here {
         flex-shrink: 1;
         cursor: default;
-        visibility: var(--breadcrumbs-title-small-visibility);
+
+        .TopBar3000--full & {
+            // It wouldn't be necessary to set visibility, but for some reason without this positioning
+            // of breadcrumbs becomes borked when entering title editing mode
+            visibility: hidden;
+        }
 
         > * {
             opacity: 1;
diff --git a/frontend/src/layout/navigation-3000/components/TopBar.tsx b/frontend/src/layout/navigation-3000/components/TopBar.tsx
index 805e52ad04e74..705f3d155bdc4 100644
--- a/frontend/src/layout/navigation-3000/components/TopBar.tsx
+++ b/frontend/src/layout/navigation-3000/components/TopBar.tsx
@@ -66,17 +66,13 @@ export function TopBar(): JSX.Element | null {
 
     return breadcrumbs.length ? (
         <div
-            className="TopBar3000"
+            className={clsx(
+                'TopBar3000',
+                effectiveCompactionRate === 0 && 'TopBar3000--full',
+                effectiveCompactionRate === 1 && 'TopBar3000--compact'
+            )}
             // eslint-disable-next-line react/forbid-dom-props
-            style={
-                {
-                    '--breadcrumbs-compaction-rate': effectiveCompactionRate,
-                    // It wouldn't be necessary to set visibility, but for some reason without this positioning
-                    // of breadcrumbs becomes borked when entering title editing mode
-                    '--breadcrumbs-title-large-visibility': effectiveCompactionRate === 1 ? 'hidden' : 'visible',
-                    '--breadcrumbs-title-small-visibility': effectiveCompactionRate === 0 ? 'hidden' : 'visible',
-                } as React.CSSProperties
-            }
+            style={{ '--breadcrumbs-compaction-rate': effectiveCompactionRate } as React.CSSProperties}
         >
             <div className="TopBar3000__content">
                 {mobileLayout && (