wuxu/codeg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): fix find widget tooltip flicker, clipping, and close button alignment

Browse Source 
- 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:
xintaofei
2026-04-13 12:08:00 +08:00
parent 41b28001af
commit 917ff9a672
2 changed files with 44 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/globals.css
View File

@@ -1114,7 +1114,7 @@
/* Monaco widgets: align popups/menus with shadcn surface style */
.context-view .monaco-menu,
.monaco-editor .suggest-widget,
.monaco-editor .editor-widget,
.monaco-editor .editor-widget:not(.find-widget),
.monaco-editor .peekview-widget,
.monaco-hover.workbench-hover {
border: 1px solid var(--border) !important;
@@ -1122,6 +1122,34 @@
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,
.monaco-editor .suggest-widget .monaco-list-row,
.monaco-editor .peekview-widget .monaco-list-row {