diff --git a/CHANGELOG.md b/CHANGELOG.md index 8519a109f..5a4d0e5ee 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,10 @@ and this project adheres to - 👷(CI) remove test-e2e-other-browser job #2404 - ♿️(frontend) use heading element for pinned documents section title #2380 +### Fixed + +- 🐛(frontend) overlap of block menu dropdown #2406 + ## [v5.2.1] - 2026-06-05 ### Changed diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-style.css b/src/frontend/apps/impress/src/cunningham/cunningham-style.css index 6cf92de88..b27a29fda 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-style.css +++ b/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 { diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/FloatingBar.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/FloatingBar.tsx index 48e5ae941..24224432d 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/FloatingBar.tsx +++ b/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 (