Context menu gets too small depending on the cursor position

[kapodamy]

Type: Bug

Context menus style has changed with lastest vscode version and they are not the right size.
Edit: issued by chrome which changed the sytle of the menus, explained here electron/electron#42262

VS Code version: Code 1.92.0 (b1c0a14, 2024-07-31T23:26:45.634Z)
OS version: Windows_NT x64 10.0.19045
Modes:

System Info

Item	Value
Screen Size	1366x768

version:

previous:

Steps to Reproduce:

• Open context menu

workarround here #224515 (comment) (requires restart)

[Scorg]

I have a similar problem, but also with fonts being bold:

[lah7]

I was going to open a report too. I couldn't find any mention in the release notes, or any setting, so I think it could be related to the Electron 30 upgrade.

Using Arch Linux / KDE with a 2160p monitor here (2.0 global scale). Context menus are way too padded and large here too.

1.91.1	1.92.0
	(I admit the newer menu does position better horizontally to the left)

Looks like the new menu goes either all above or all below the cursor position, hence the scrolling.

Would really love to see an option for the old (native?) menus back. If that's impossible, at least add customisation options to control the padding, font, colours to make the new menu more comfortable.

[medovina]

I'm using Ubuntu 24.04. With this VS Code release the context menu font is uncomfortably large on my machine as well. I'd also like to have an option to use the old menu style.

I think the title of this issue (currently "Context menu gets too small depending on the cursor position") should be more general, e.g. "Context menu has inappropriate font size".

[godoyLeonardo]

I'm using Ubuntu 24.04. With this VS Code release the context menu font is uncomfortably large on my machine as well. I'd also like to have an option to use the old menu style.

I think the title of this issue (currently "Context menu gets too small depending on the cursor position") should be more general, e.g. "Context menu has inappropriate font size".

inappropriate font size and padding

[chapmanjacobd]

It seems like the new context menu loads a 100~200 ms slower too

[Vallek]

Please give us an option to revert it! I don't need or want tablet style menus in a desktop code editor)

[halfburnttoast]

Also having this problem with Linux Mint MATE 21.3. The menu items are way too large. The context menu is so large that the items can't fit on the screen. I've downgraded back to 1.91 for now.

[CGooden9]

Same here. Also, the menu is bright white for me, despite using the dark modern theme. Maybe that's because I'm using the mixed Linux Mint theme (most parts are white, some are black for contrast)? I feel that it should at least match up with the app theme, like the old one did (or have an option to revert back to the old version altogether).

[CGooden9]

I've figured out a temporary solution, at least on linux. Set window.titleBarStyle to "custom". This restores the context menus, though also changes other parts of the UI. I've attached some screenshots for comparison.

[kapodamy]

upstream problem electron/electron#42262

[GaryMatthews]

cheers @CGooden9 this is exactly the fix i was looking for to solve the context menu font size issue. now its a matter of excess padding but this puts most if not all menu items back into view instead of having to scroll to menu items on wasted screen real estate which is a frustrating experience.

[akalankasakalasooriya]

Same happened to me on ubuntu 22.04. KDE plasma
#225033

[siferati]

Same problem for me since updating VS Code today.
It's basically the same shitty Chrome Refresh 2023 that people have been complaining about for the past few months.
I guess it has finally affected Electron and VS Code too...

• Make Chrome Refresh 2023 avoidable in the long term brave/brave-browser#37770
• https://www.reddit.com/r/chrome/comments/1dkluz5/new_ui_megathread_3/

[vladlabs]

window.titleBarStyle to "custom

But there is a small issue here custom title bar is awful.

BTW I have a similar issue
My desctop UI menus are light and VSCode theme is dark.
It was working on previous version before 1.92.0

[metablaster]

Same issue, the menu and fonts are too big, it covers almost my entire 1920x1080 screen, sometimes so big there is scroll menu on the menu to scroll the menu.

It feels like dealing with touch screen or a phone rather than desktop PC.

Version: 1.92.1
Commit: eaa41d57266683296de7d118f574d0c2652e1fc4
Date: 2024-08-07T20:16:39.455Z
Electron: 30.1.2
ElectronBuildId: 9870757
Chromium: 124.0.6367.243
Node.js: 20.14.0
V8: 12.4.254.20-electron.0
OS: Linux x64 6.9.7+bpo-amd64

[tycode]

I'm affected by this too.

I just updated VS Code from 1.91.1 to 1.92.1.

Opening the menu for an extension in the extensions view used to easily fully fit on the screen, now I get a menu that unnecessarily scrolls, because of two things:

1. it's bigger, as mentioned here already
2. it now wants to insist it's either fully above or fully below my cursor, so when the thing I'm clicking on (to open the menu in the first place) is half-way down the screen it can only use half the screen height, whereas before it was perfectly happy to move up or down a bit in order to fit fully on screen.

Can we please have an option to use native OS menus only?
If that's not possible, then fully custom ones that either just have sensible metrics, or have metrics we can tweak ourselves, would work fine too. Anything that successfully avoids Chrome's questionable design choice here, please.

I run Debian Linux with MATE, I use the "Native title bar" option in VS Code, and I do not use Chrome. Firefox's menus are fine, and all other non-Electron programs are fine. VS Code's menus used to be fine since they were native, now they are significantly bigger than any other menu I will ever see on my PC.

PS. I would also appreciate such an option on Windows. I've been bugged by this there since much longer ago since Electron menus have been non-native on Windows for ages, but I mostly solved that problem by switching most of my computer use to Linux(!), so for me this has now been "un-solved" since this now affects Linux too.

Edit: I have successfully rolled back to 1.91.1. For now I will stay on that version until this menu issue is resolved.

[RokeJulianLockhart]

#224515 (comment)

@kapodamy, this issue was rather difficult to locate, to the extent that I accidentally filed a duplicate: #225055 (comment). I suggest that it be renamed to better reflect the underlying cause - that the context menus are unexpectedly large.

[tycode]

#224515 (comment)

@kapodamy, this issue was rather difficult to locate, to the extent that I accidentally filed a duplicate: #225055 (comment). I suggest that it be renamed to better reflect the underlying cause - that the context menus are unexpectedly large.

It's more the fact that the root cause (Chrome's design change ending up in Electron and now in VS Code) has two separate visible effects/symptoms: one is the menu is bigger, the other is that the size now depends on the cursor position when it didn't before. So both issues were described accurately, just from different points of view.

Hopefully my comparison screenshot will help to make this clear both to the VS Code team and to anyone else coming to report the same problem.

[firavoyage]

ubuntu 24
same
fuck god

[domdfcoding]

Starting seeing absolutely massive context menus on Ubuntu 20.04 after updating to 1.92.2 yesterday. Could read them from across the room

[Foresteam]

Having the same issue.

• VS Code Version: 1.92+ (1.92.2)
• Was fine on 1.91.1.24193-1
• OS Version: Arch Linux 6.6.47-1-lts, Wayland, Plasma 6.1.4, QT 6.7.2

The problem: menu fonts got bigger with an update, and now often don't fit in the screen.
Before:

Now:

[RossBrunton]

Agreed that this is terrible. Even ignoring the appearance, the fact that it jumps around so much when scrolling makes it obnoxious.

I know that window.titleBarStyle fixes this (on Linux at least), but requires you to have the fancy titlebar thingie. Would it be possible to split out a seperate option for "use native context menus" or similar?

[BellCubeDev]

Reporting in from a fresh install of Insiders (1.93.0-insider 36e4ddb) on a fresh install of Mint (Mint 22, kernel 6.8.0-41-generic). Changing window.titleBarStyle replaces the context menu as well which restores the behavior I'm used to but the massive menus on start are hard to work with.

[Lehdari]

Same problem here, Ubuntu 22.04 LTS. Super distracting to work with, menus extend almost the entire vertical screen space with some extensions. I don't like the custom style either.

[ra50]

Same here on Mint 21.3. Menus too large, text too bold. Setting window.titleBarStyle to custom fixes it. But that should not be necessary. The way menus look with custom title bar should be the same with native title bar.

[flying-sheep]

Can y’all please stop with the useless “me too” responses?

That’s why GitHub introduced the 👍 reaction, just click it.

Also @yomajo, please learn how to read issues. You’re missing the fact that there is an upstream issue. Find it, and stop blaming the VS Code devs for “messing” with something they didn’t touch.

[kc9jud]

According to the upstream bug report (electron/electron#42262 (comment)), this is indeed part of Chrome Refresh 2023 and there is no clear path forward for Electron to resolve this.

[tycode]

I have proposed a possible way forward for anyone affected by this issue: #229053

This doesn't restore proper native OS menus to newer Electron (since that would probably be extremely challenging), but it does permit you to use the VS Code custom menus while using the native OS titlebar. I personally find this an acceptable solution, on par with the experience of "VS Code 1.91.1 on Linux with native titlebar & menus", but I'd be interested to hear what the consensus is on whether this approach works for everyone else watching this discussion.

[ra50]

Without knowing the details of the Electron change, it's crazy that VS Code can show native looking menus with the custom window title bar, but can't show native looking menus and instead shows these extra large white menus with the native window title bar. It should be possible to patch out whatever madness is forcing this from Electron.

[tycode]

@ra50 I agree that VS Code's "custom" menus look more like native menus than these "new"/current Electron menus do. However - and I say this as someone who's now actually inspected the code behind it - VS Code's "custom" menus are not actually native at all. They are all done in CSS & JS, so they would have either been designed by the VS Code team or a contributor, or by someone else who made some menu library that the VS Code team then decided to use. If they look native, that's just because whoever designed them did a good job of... making them look native.

"Patching" VS Code to show "native looking" (custom) menus while using the native title bar is exactly what my issue (linked above) proposes, and exactly what my pull request at #229385 implements (my apologies that I didn't leave a comment here earlier with a link to this). All that is needed now is for this (or something else that does the same job) to be merged and included in an official release.

[makirill]

Chrome implemented this menu change some time ago and that has been met with mixed reactions. Developers reduced the font weight after it, making the menu appear less bold and visually smaller. Is it possible to replicate this change in Visual Studio Code as a temporary workaround?

[kolbma]

Where does this font come from in Electron/Chrome?
I mean when you have all different kind of problems with the font, some too small, the other (like me) much too big and other bold, then there should be some way to influence it.
So how does Electron/Chrome decide which font in which size and style to use?

[jamesrobb]

Running into this with Manjaro, Plasma 6.1.5, VSCode 1.94.1

[elamperti]

Same issue here — Manjaro, i3wm, VSCode v1.96

Enabling the custom window style solves the context menu but fucks up the title bar, since it tries to use the vscode title bar implementation (which takes a gigantic chunk of precious vertical space).

[lah7]

💡 Tip for Linux KDE/KWin users: You can force the native title bar with a custom title bar style (the workaround to fix menus as mentioned) by adding a window rule like so:

• System Settings → Window Management → Window Rules → New
  • Window class (application) : code Code
  • Add: "No titlebar and frame" : "Apply Initially" = "No"
    

Optionally, use the Custom CSS JS Loader extension to hide the application icon in the menu bar with CSS:

.window-appicon {
    display: none;
}

End result:

Although, this may not be useful if you want the title bar and tab bar only. This is like having a menu bar & poor man's toolbar (#41309) stitched together above the tabs. There's also double window controls until #229385 is merged (thanks @tycode for working on that!). For me, the native title bar is important as it's my middle click shortcut to lower windows.

I actually prefer VS Code's custom menus over the "native" ones the earlier versions had - that's probably because VS Code's menus have an empty icon column, even though VS Code doesn't populate them (#208482), this menu layout/spacing is more in line with the rest of the system.

I'm not sure if the other window compositing managers (marco, metacity, openbox, i3) have this ability if you wanted to use this workaround.

[glitterkitty]

I've figured out a temporary solution, at least on linux. Set window.titleBarStyle to "custom". This restores the context menus, though also changes other parts of the UI.

#224515 (comment)

thx @CGooden9
worked for me, too