fix(editor): improve completion popup overflow

This commit is contained in:
t8y2 2026-06-12 01:20:11 +08:00
parent 4f71bcbff8
commit b18f837b50
1 changed files with 9 additions and 11 deletions

View File

@ -356,10 +356,13 @@ export function buildSqlCompletionThemeRules(): CodeMirrorStyleSpec {
boxShadow: "0 8px 18px rgb(0 0 0 / 0.14)",
color: "var(--popover-foreground)",
fontFamily: `var(${EDITOR_FONT_FAMILY_CSS_VAR}, var(--font-mono, monospace))`,
maxWidth: "min(520px, calc(100vw - 24px))",
maxWidth: "min(760px, calc(100vw - 24px))",
minWidth: "min(280px, calc(100vw - 24px))",
overflow: "hidden",
overflowX: "auto",
overflowY: "hidden",
padding: "4px 0",
scrollbarColor: colorMixValue("var(--muted-foreground) transparent", "color-mix(in oklch, var(--muted-foreground) 44%, transparent) transparent"),
scrollbarWidth: "thin",
zIndex: "9999",
},
".cm-tooltip.cm-tooltip-autocomplete *": {
@ -368,7 +371,9 @@ export function buildSqlCompletionThemeRules(): CodeMirrorStyleSpec {
".cm-tooltip.cm-tooltip-autocomplete > ul": {
maxHeight: "min(280px, calc(100vh - 32px))",
minWidth: "min(280px, calc(100vw - 24px))",
width: "max-content",
overflowX: "hidden",
overflowY: "auto",
padding: "0 4px 0 !important",
scrollbarColor: colorMixValue("var(--muted-foreground) transparent", "color-mix(in oklch, var(--muted-foreground) 44%, transparent) transparent"),
scrollbarWidth: "thin",
@ -383,7 +388,6 @@ export function buildSqlCompletionThemeRules(): CodeMirrorStyleSpec {
height: "28px",
letterSpacing: "0",
lineHeight: "28px",
maxWidth: "100%",
overflow: "hidden",
padding: "0 10px !important",
transition: "background-color 90ms ease, color 90ms ease",
@ -452,14 +456,11 @@ export function buildSqlCompletionThemeRules(): CodeMirrorStyleSpec {
},
".cm-completionLabel": {
color: "inherit",
flex: "0 1 auto",
flex: "0 0 auto",
fontFamily: `var(${EDITOR_FONT_FAMILY_CSS_VAR}, var(--font-mono, monospace))`,
fontSize: `clamp(12px, var(${EDITOR_FONT_SIZE_CSS_VAR}, 13px), 14px)`,
fontWeight: "520",
letterSpacing: "0",
minWidth: "0",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
},
".cm-completionMatchedText": {
@ -472,12 +473,9 @@ export function buildSqlCompletionThemeRules(): CodeMirrorStyleSpec {
fontSize: `clamp(11px, calc(var(${EDITOR_FONT_SIZE_CSS_VAR}, 13px) - 1px), 13px)`,
fontWeight: "500",
fontStyle: "normal",
flex: "1 1 auto",
flex: "0 0 auto",
marginLeft: "10px",
minWidth: "0",
opacity: "1",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
},
};