fix: #24553 gives header buttons more room when editing titles (#24755)

Co-authored-by: adyh <[email protected]> Co-authored-by: Michael Matloka <[email protected]>
PostHog · Sep 4, 2024 · 43555bf · 43555bf
1 parent 56f2716
commit 43555bf
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 13 deletions.
diff --git 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
@@ -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 && (