Option to widen the command palette
Moghul opened this issue · 34 comments
I have a number of files that are quite deep in the file structure and some of them share names at least partially. It's a common occurrence that I will search for a file, get several options, and be unable to discern which of the results are the exact one I'm looking for.
I want to be able to
a) Make the width of the command palette increase automatically to include the full path
b) Manually set a px width for the command palette
PS. If there is a way to do either of these already, I have been unable to find it, and would appreciate being told how.
This feature request is now a candidate for our backlog. The community has 60 days to upvote the issue. If it receives 20 upvotes we will move it to our backlog. If not, we will close it. To learn more about how we handle feature requests, please see our documentation.
Happy Coding!
🙂 This feature request received a sufficient number of community upvotes and we moved it to our backlog. To learn more about how we handle feature requests, please see our documentation.
Happy Coding!
This would be great to have. I thought this extension would lend a workaround but not sure if its css rules can target the "Quick Open" or not.. https://marketplace.visualstudio.com/items?itemName=iocave.customize-ui
Thanks for the suggestion. I'll investigate when I have some time on my hands :)
@peternoges , @Moghul using the extension you posted, I had success with the following (add to settings.json):
"customizeUI.stylesheet": {
".quick-input-widget": "width:800px !important"
}
YMMV!
@utilityboy Thanks for the help! That actually did do something. It's off-center, but at least it's wide enough now for me to read the full path. It'll do nicely until the official feature is implemented.
EDIT: I actually managed to adjust it with a bit more CSS.
".quick-input-widget": "width: 1000px !important; left: calc(50% - 200px);"
This is what did it for me.
Based on Moghul's answer, for anyone who wants a full width Quick Open:
{
"customizeUI.stylesheet": {
".quick-input-widget": "width: 100% !important; left: 300px"
}
}@zzhjerry thank you, where would I specify that?
@zzhjerry thank you, where would I specify that?
In settings.json file after you install this extension https://marketplace.visualstudio.com/items?itemName=iocave.customize-ui
This is pretty hacky to get working on Ubuntu without opening up some permissions. Would be nice to be able to enable some custom CSS for UI tweaking.
This is pretty hacky to get working on Ubuntu without opening up some permissions. Would be nice to be able to enable some custom CSS for UI tweaking.
@rlzaleski Did you find a way to get it working on ubuntu? What permissions we need to open? Thanks.
In a similar vein, being able to set the height of the command palette would make it easier to get an overview of its elements - it's the main reason I used customize-ui (iocave/customize-ui#156).
I'm a heavy user of VSpaceCode, and here's how my config looked when opening its menu (folded in because the screenshot is long 😅):
vs. now, without customize-ui:
I can live without the custom coloring, but not seeing the possible keybindings on one glance kind of defeats the purpose of that extension.
Ability to widen the command palette would be to extremely helpful in my monorepo
Although the Customize UI extension linked in a previous comment no longer works at this time for VSCode v1.74+, I was able to use the vscode-custom-css to achieve the same effect as @zzhjerry 's settings.json. Just create a css file that I'll call widen-command-palette.css, copy the following css into the file:
.quick-input-widget {
width: 80% !important;
}
and then follow the "Getting Started" instructions for the vscode-custom-css extension to copy widen-command-palette.css into the vscode_custom_css.imports setting. I'd also advise disabling the monkey patch from the Customize UI extension, and then uninstalling Customize UI and Monkey Patch since they're broken, as I mentioned.
After restarting VSCode, the command palette should be wider, and this should work for v1.74+ as well. Hopefully this helps any users who're totally css-illiterate, like I was.
Just wanna say though: I don't see this workaround as a satisfying alternative to the devs natively providing an option to widen the command palette.
I'm surprised this option isn't built into vscode yet. Visual Studio (the .Net IDE) has had that feature for years.
Thanks for the update on that @asalvare3, I had postponed upgrading because it broke this feature. Just goes to show how necessary it is.
Thanks all! Are there any updates from the VS code team on this front?
Just sharing my use case:
The path at the beginning is equal for all search results
I would be happy if we could:
- widen the command palette, or
- instead of repeating the file path, we could only show the part that repeats and below the parts that are different, for example:
long/path/that/makes/the/file/name/invisible
-- folderAAAA/filename.extension
-- folderBBBB/filename.extension
@cesarviana Mine is very similar. I'm running a rather large monorepo, so I often don't know which file I have selected. I have a 38" wide monitor, so it's a bummer that the command palette is so narrow.
@johnnyoshika @cesarviana same here. I might have to go down the road of just writing an extension to solve the problem. Just need a few hours of "free" time. Will keep you guys posted.
These solutions wouldn't work for me, so I just barbarically used find . -name ... in the integrated terminal. Most of the time you can also just ctrl-click a file to open it.
CSS that I ended up using to keep the dialog centered and working at different screen widths:
.quick-input-widget {
width: 80% !important;
max-width: 900px !important;
left: 50% !important;
transform: translate(-50%, 0) !important;
margin-left: unset !important;
}Probably don't need all of those important tags but I'm hurrying through it. You can swap out the max-width value for whatever you want the dialog size to be able to grow to
Thanks for the suggestions, tweaking the CSS has made this widget much easier for me to use. Another question/request for command pallete customization, can it be configured such that quick-input-header is displayed below quick-input-list?
CSS that I ended up using to keep the dialog centered and working at different screen widths:
.quick-input-widget { width: 80% !important; max-width: 900px !important; left: 50% !important; transform: translate(-50%, 0) !important; margin-left: unset !important; }Probably don't need all of those important tags but I'm hurrying through it. You can swap out the max-width value for whatever you want the dialog size to be able to grow to
This doesn't work for me anymore. Does anyone have a working solution, and/or is anyone 'quick-pick'ing this?
Edit: Specifically, the extension wants me to run vscode with admin privileges and I'm not thrilled with that.
As Moghul said, I'm also not very comfortable with the idea of giving privileges to install a module for injecting CSS/JS into VSCode. Overall, I agree with everyone that on wide screens, it's difficult to list and differentiate between files that have the same name (I work in a monorepo), since the command palette is too narrow.
I think this should be natively integrated into a future VSCode release.
@Moghul Were you able to get things to work? I was able to get things to work on VsCode Version: 1.81.0 without running admin. Not sure if something changed.
No, the extensions that allowed UI changes are now also deprecated. This PR #117862 is supposed to fix it, but it has been stagnant for some weeks.
It's very unfortunate there is no movement on this given #117862 (thanks for that contribution btw). For those who are ok with looking at somewhat minified CSS, you don't need an extension to get things into a workable state.
VSCode (at least on MacOS) loads up CSS from package contents (I would expect this is similar on Windows/Linux given Electron). The css with the quick picker is in the workbench file:
When you open / edit this file you'll be prompted like such to trust the location of the file you're editing, which should be fine to do given VS Code is opening itself (inception!)
The selector you're looking for is the same as I posted above so you'll see something like:
.quick-input-widget{position:absolute;width:600px;...'
Do whatever you need to inside that block... for me, I don't care if it's centred or not... I just want to see my files so my change is simply:
.quick-input-widget{position:absolute;width:1000px !important;...
If you wish to centre, just make sure margin-left is -50% of whatever you set for width. In the example above, it would be:
.quick-input-widget{position:absolute;width:1000px !important;margin-left: -500px !important;...
Once you save this file, and restart VSCode, you'll get an error saying your installation is corrupt (since the checksums will fail as a result of this change). You can accept this and choose not to show the message in the future, or you can just have it show every time VSCode starts up and rejoice that you can see the entire path to the file you're working on.
Ugly, yes. Functional, also yes. Standard caveats apply here folks... if you're not comfortable making changes like this, please don't. Just sharing my experience, so YMMV, but I wish you luck. Also note, this change will be overwritten with each VSCode update.
My initial inspiration for this work actually stemmed from this discussion thread, and I am immensely grateful for the discussions around iocave.customize-ui. These discussions allowed me to gradually approach my goal, and in the end, I created a small tool that aligns with my personal expectations. The visual style is as follows.
I shared my accomplishment on Reddit's /r/vscode, but I thought there might be friends here who love this style as well. So, I'm also sharing it with you all. Here is my gist link. Hope you enjoy using it! ❤️
(In fact, I didn't specifically adjust the width, but you can still include your width requirements in the script.)
+1 to this feature. This would be nice to see out of the box. I'd expect some "adaptive width" option to enable. I write in C++ and there are very long paths to std headers (obviously I'm interested in the last path node only) that I have to hover with mouse for now to see which is quite annoying as this takes a lot of time.
@chall1123 I suppose you also have to install this extension
Addendum to #85374 (comment)
For Windows, the file (at least the way I installed it) is here:
C:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css
BTW:
- It doesn't matter if e.g. Prettier formats the code. But it needs the
!important. - To center it, also update the margin-left to half the value of width.
My final css rule:
.quick-input-widget {
left: 50%;
margin-left: -450px !important; /* edited */
position: absolute;
width: 900px !important; /* edited */
z-index: 2550;
-webkit-app-region: no-drag;
border-radius: 6px;
}Make sure to completely close all of VS Code, not just the Window. I usually do:
taskkill -f -im code.exe
which kills all VS Code processes.