fix(editor): improve completion popup overflow
This commit is contained in:
parent
4f71bcbff8
commit
b18f837b50
|
|
@ -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",
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue