🐛(frontend) fix ui issues

- Fix floating bar z-index to ensure it appears
  under the editor toolbar and suggestion menu
- Add text center to toolip content

Author: AntoLC

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Fixed 
+
+- 🐛(frontend) overlap of block menu dropdown #2406
+
 ## [v5.2.1] - 2026-06-05
 
 ### Changed

src/frontend/apps/impress/src/cunningham/cunningham-style.css

@@ -94,6 +94,7 @@
 */
 .c__tooltip {
   padding: var(--c--globals--spacings--t) var(--c--globals--spacings--xxs);
+  text-align: center;
 }
 
 .c__tooltip .react-aria-OverlayArrow svg {

src/frontend/apps/impress/src/features/docs/doc-header/components/FloatingBar.tsx

@@ -1,8 +1,6 @@
-import { useMemo } from 'react';
 import { css } from 'styled-components';
 
 import { Box, Card } from '@/components';
-import { useCunninghamTheme } from '@/cunningham/useCunninghamTheme';
 import { useDocStore } from '@/docs/doc-management/stores/useDocStore';
 import { DocShareButton } from '@/features/docs/doc-share/components/DocShareButton';
 import { LeftPanelCollapseButton } from '@/features/left-panel/components/LeftPanelCollapseButton';
@@ -11,6 +9,36 @@ import { useResponsiveStore } from '@/stores';
 
 import { DocToolBox } from './DocToolBox';
 
+const FLOATING_STYLES = css`
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  padding: var(--c--globals--spacings--sm);
+  padding-bottom: 0;
+  z-index: 10; // Under editor select box but above other elements (e.g., doc title, suggestion menu)
+  align-items: flex-start;
+  isolation: isolate;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
+    backdrop-filter: blur(1px);
+    -webkit-backdrop-filter: blur(1px);
+    mask-image: linear-gradient(180deg, black 50%, transparent 100%);
+    -webkit-mask-image: linear-gradient(180deg, black 50%, transparent 100%);
+  }
+
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+`;
+
 /**
  * Sticky bar trick (desktop):
  * - MainContent has padding `base`; we extend the bar width and apply
@@ -19,52 +47,10 @@ import { DocToolBox } from './DocToolBox';
  * Mobile: returns null to avoid header overlap.
  */
 export const FloatingBar = () => {
-  const { spacingsTokens } = useCunninghamTheme();
   const { isLargeScreen } = useResponsiveStore();
   const { currentDoc } = useDocStore();
   const isDeletedDoc = !!currentDoc?.deleted_at;
 
-  const FLOATING_STYLES = useMemo(() => {
-    const sm = spacingsTokens['sm'];
-    return css`
-      position: sticky;
-      top: 0;
-      left: 0;
-      right: 0;
-      width: 100%;
-      min-height: 64px;
-      padding: ${sm};
-      z-index: 21; // Under editor select box but above other elements (e.g., doc title, suggestion menu)
-      align-items: flex-start;
-      isolation: isolate;
-
-      &::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        z-index: -1;
-        background: linear-gradient(
-          180deg,
-          #fff 0%,
-          rgba(255, 255, 255, 0) 100%
-        );
-        backdrop-filter: blur(1px);
-        -webkit-backdrop-filter: blur(1px);
-        mask-image: linear-gradient(180deg, black 50%, transparent 100%);
-        -webkit-mask-image: linear-gradient(
-          180deg,
-          black 50%,
-          transparent 100%
-        );
-      }
-
-      > * {
-        position: relative;
-        z-index: 1;
-      }
-    `;
-  }, [spacingsTokens]);
-
   return (
     <Box
       className="--docs--floating-bar"