fix(frontend): fix find widget tooltip flicker, clipping, and close button alignment
- Prevent hover tooltip flicker by adding pointer-events:none to the .context-view overlay that covers trigger buttons - Escape overflow:hidden clipping on ancestor elements by switching the tooltip overlay to position:fixed, with CSS custom properties (--cv-offset-x/y) set via ResizeObserver to translate container-relative coordinates to viewport-relative - Give the find widget its own border/radius styles (no top border, bottom-only border-radius) since it slides from the editor top - Adjust close button vertical position to align with action buttons Closes #73 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1114,7 +1114,7 @@
|
|||||||
/* Monaco widgets: align popups/menus with shadcn surface style */
|
/* Monaco widgets: align popups/menus with shadcn surface style */
|
||||||
.context-view .monaco-menu,
|
.context-view .monaco-menu,
|
||||||
.monaco-editor .suggest-widget,
|
.monaco-editor .suggest-widget,
|
||||||
.monaco-editor .editor-widget,
|
.monaco-editor .editor-widget:not(.find-widget),
|
||||||
.monaco-editor .peekview-widget,
|
.monaco-editor .peekview-widget,
|
||||||
.monaco-hover.workbench-hover {
|
.monaco-hover.workbench-hover {
|
||||||
border: 1px solid var(--border) !important;
|
border: 1px solid var(--border) !important;
|
||||||
@@ -1122,6 +1122,34 @@
|
|||||||
box-shadow: 0 18px 36px -24px rgb(0 0 0 / 55%) !important;
|
box-shadow: 0 18px 36px -24px rgb(0 0 0 / 55%) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Find widget slides from top: only bottom corners rounded, no top border */
|
||||||
|
.monaco-editor .find-widget {
|
||||||
|
border-left: 1px solid var(--border) !important;
|
||||||
|
border-right: 1px solid var(--border) !important;
|
||||||
|
border-bottom: 1px solid var(--border) !important;
|
||||||
|
border-top: none !important;
|
||||||
|
border-radius: 0 0 var(--radius) var(--radius) !important;
|
||||||
|
box-shadow: 0 18px 36px -24px rgb(0 0 0 / 55%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Align the close button with the action buttons (prev/next match) */
|
||||||
|
.monaco-editor .find-widget > .button.codicon-widget-close {
|
||||||
|
top: 9px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fix: Monaco hover tooltips are rendered in a .context-view overlay that
|
||||||
|
1) covers the trigger button causing mouseleave→show flicker, and
|
||||||
|
2) gets clipped by overflow:hidden on ancestor elements.
|
||||||
|
Using position:fixed escapes overflow clipping; translate corrects the
|
||||||
|
coordinates (inline top/left are container-relative, translate adds the
|
||||||
|
container's viewport offset). pointer-events:none prevents the overlay
|
||||||
|
from stealing mouse events from the button underneath. */
|
||||||
|
.context-view:has(> .workbench-hover-container) {
|
||||||
|
position: fixed !important;
|
||||||
|
translate: var(--cv-offset-x, 0px) var(--cv-offset-y, 0px);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
.context-view .monaco-menu .monaco-action-bar.vertical .action-item .action-menu-item,
|
.context-view .monaco-menu .monaco-action-bar.vertical .action-item .action-menu-item,
|
||||||
.monaco-editor .suggest-widget .monaco-list-row,
|
.monaco-editor .suggest-widget .monaco-list-row,
|
||||||
.monaco-editor .peekview-widget .monaco-list-row {
|
.monaco-editor .peekview-widget .monaco-list-row {
|
||||||
|
|||||||
@@ -1014,6 +1014,21 @@ export function FileWorkspacePanel() {
|
|||||||
setCursorLine(editorInstance.getPosition()?.lineNumber ?? 1)
|
setCursorLine(editorInstance.getPosition()?.lineNumber ?? 1)
|
||||||
applyHiddenAreas()
|
applyHiddenAreas()
|
||||||
applyGitChangeDecorations()
|
applyGitChangeDecorations()
|
||||||
|
|
||||||
|
// Set CSS custom properties so hover tooltips can use position:fixed
|
||||||
|
// to escape overflow:hidden clipping on ancestor elements.
|
||||||
|
const dom = editorInstance.getContainerDomNode()
|
||||||
|
if (dom) {
|
||||||
|
const syncOffset = () => {
|
||||||
|
const r = dom.getBoundingClientRect()
|
||||||
|
dom.style.setProperty("--cv-offset-x", `${r.left}px`)
|
||||||
|
dom.style.setProperty("--cv-offset-y", `${r.top}px`)
|
||||||
|
}
|
||||||
|
syncOffset()
|
||||||
|
const ro = new ResizeObserver(syncOffset)
|
||||||
|
ro.observe(dom)
|
||||||
|
editorInstance.onDidDispose(() => ro.disconnect())
|
||||||
|
}
|
||||||
},
|
},
|
||||||
[applyGitChangeDecorations, applyHiddenAreas]
|
[applyGitChangeDecorations, applyHiddenAreas]
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user