Sidebar defaultWidth, View-Specific Sidebar widths, & View-Specific Sidebar defaultWidths

[bradenbiz]

Summary

It'd be awesome if each Activity Bar View(ie. "File Explorer", "Search", "Source Control", "Extensions")'s Sidebar has its own unique width, that can be adjusted:

1. manually (via the sash)
2. using defaults in the User/Workspace settings
3. or both

Reasoning

When switching between the different Views in the Activity Bar, there are different Sidebar widths that are more conducive to productively using each View (a value, which, will vary per user's preferences and/or per workspace's details).
For example, personally for my workspace, the "Source Control" View needs more space than the "File Explorer" View does. So, when I switch between the two, I have to adjust the Sidebar width manually (via the sash) every time if I want to maximize screen space with the "File Explorer" View or efficiently use the wider "Source Control" View.

Current Behavior

• The Sidebar default width cannot be adjusted in User/Workspace settings.
• The Sidebar width can be adjusted manually (via the sash), but it is not preserved on close/reopen of VSCode and is the same regardless of which View is selected.

Desired Behavior

• The Sidebar default width can be configured in User & Workspace settings.
• When switching between Views in the Activity Bar, each View's Sidebar can have its own unique width.
• Manual changes to each View's Sidebar width (via the sash) can be left unpreserved, preserved in local storage temporarily, or preserved permanently in User/Workspace settings.
• Each View's Sidebar's default width can be configured in User or Workspace settings.
• Views that are created by 3rd party extensions can have their Sidebars be configured the same way.

Potential (example) Settings

General

• "workbench.sidebar.defaultWidth" = 400
  [default: {whateverVSCodeCurrentlyUses}]
  (the default width of every View's Sidebar that does not have a custom value set to it)
• "workbench.sidebar.useViewSpecificSidebarWidths" = true
  [default: false]
  (make each View's Sidebar have its own unique width)
• "workbench.sidebar.autoAssignViewDefaultWidths" = true
  [default: false]
  (assign the defaultWidth setting of a View every time there is a manual change via the sash to a View's Sidebar width)
  (requires workbench.sidebar.useViewSpecificSidebarWidths = true)

View-Specific Sidebar Default Widths

(require workbench.sidebar.useViewSpecificSidebarWidths = true)

• "workbench.sidebar.explorer.defaultWidth" = 500
  [default: workbench.sidebar.defaultWidth]
  (the default width of the "File Explorer" View's Sidebar)
• "workbench.sidebar.scm.defaultWidth" = 600
  [default: workbench.sidebar.defaultWidth]
  (the default width of the "Source Control" View's Sidebar)
• "workbench.sidebar.search.defaultWidth" = 900
  [default: workbench.sidebar.defaultWidth]
  (the default width of the "Search" View's Sidebar)
• "workbench.sidebar.extensions.defaultWidth" = 550
  [default: workbench.sidebar.defaultWidth]
  (the default width of the "Extensions" View's Sidebar)
• "workbench.sidebar.gitlens.defaultWidth" = 870
  [default: workbench.sidebar.defaultWidth]
  (the default width of the "GitLens" View's Sidebar)
• "workbench.sidebar.{anyActivityBarView}.defaultWidth" = 700
  [default: workbench.sidebar.defaultWidth]
  (the default width of the "{anyActivityBarView}" View's Sidebar)

[vscodenpa]

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!

[zackarydev]

Either we have default widths, or the editor can remember the last width used.

[bradenbiz]

@ZackTherrien Yes, but the point of my suggestions is that setting the default width of a view and remembering the last width of a view are the same thing.

[OzWookiee]

Oh man, the number of times that I resize the SVN or extensions sidebar! Yes please :)

[vscodenpa]

This feature request has not yet received the 20 community upvotes it takes to make to our backlog. 10 days to go. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

[vscodenpa]

🙂 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!

[starball5]

Related Stack Overflow questions:

• How can I configure the sidebar and panel's default sizes in VS Code?
• How can I force the VS Code panel to be certain height on startup?

[krishCoolCoder]

Hello all, Kindly let me know if this feature is developed. I am looking foward to config a hot key to access and resize the side panel in vsc so eagerly. I have to search for that little mouse pointer to navigate around just to resize.

[mdigital123]

for the love of all that is holy please add this, its been years

[devklepacki]

Yes, we need this. How on earth do we still have to resize the sidebar each time the view is switched between Debug/Explorer/Chat/whatever?

[kodmanyagha]

Yes, we want this.

[starball5]

Note: The same(?) request was closed as out-of-scope in 2016: #12446, which had a duplicate, #15832

[vruyr]

The comment mentioned 6-12 month roadmap. So hopefully this has a chance of getting some attention.

[OliverZott]

Every single time switching between Explorer and Debugger I have to resize. I really hope this gets some attention in the near future.

[PaulMcInnis]

++++ disappointed that we are all required to waste time resizing, especially with the copilot chat default location being in the sidebar.

You really want a different size for that compared to a file tree...

[Gatinoko]

Been waiting for this for years, I hate having to expand a bunch of tabs everytime I switch any views whatsoever.

[devklepacki]

This is ridiculous, especially since there's Copilot living in there as well. I can't believe nobody in MS has this issue. How do we get someone to make it happen? Like tag @microsoft or @vscodeteam or something, lol

[onurkerimov]

We definitely need this. I keep coming back here to check if it has been finally resolved. It's extremely annoying to shrink the sidebar every time when opening a project, switching screens, etc.

[emvaized]

Super useful feature. Especially if it will work inabtrusively, by simply restoring the last set width for each sidebar panel. I hope it gets more attention from developers.

[totkeks]

Just had exactly this issue with extension view vs explorer view. The former is better useable when wider, e.g. using auto-width when double clicking the sash, while the latter requires less space, also using auto-width. Could really use this feature.

[jda0]

@totkeks slight tangent but addressed this pain point for me - vscode finally added a secondary sidebar, maybe moving extension mode to that would help you out?

+1 on ticket though, I'd love to pin my sidebar widths

[totkeks]

@totkeks slight tangent but addressed this pain point for me - vscode finally added a secondary sidebar, maybe moving extension mode to that would help you out?

Thanks for the hint. It might work as a workaround for me, though I'm currently using Copilot Chat in the secondary sidebar and plan to keep it there, once I upgrade from 16:9 to 21:9 resolution, as this would allow me to easily fit primary sidebar with explorer or git or debugger, two editor windows with the terminal below them, and the secondary bar on the right side.

So, for me the view-specific widths would still be more helpful. Then I can just go to the view I want, e.g. Extensions or Debugger, this will resize the editor/terminal area (I guess?), and when I jump back to file explorer everything should be as it was before.

[webstorybegin]

I work in a team of 11 frontend developers, and all of them are on their knees asking you to implement memorising or manually setting a fixed sidebar width !

[TerryCM]

Still waiting for this!

[zamuuu]

Still waiting VS Code...

[DannyTheHippo]

same, still waiting. please add this feature

[n1k0]

This has been a nightmare when switching screens using different resolutions for 2 years now, could we please have an update? Having a setting for specifying a fixed sidebar width doesn't sound like a super complicated thing to implement while nearly 200 people have thumbed up the issue. It'd be very nice to have some updates on why it isn't there just yet and how we could help it moving forward. Thanks for your understanding 🙏

[DavidOsparks]

When VSCode working with a notebook and an external monitor, it's a hell. Because I put VSCode windows in the external monitor, but when the monitor is unplugged, they will go back to the screen of notebook, every time the external monitor is plugged in or unplugged, the width of sidebar is gone... and this will be happened everyday.

[FloppyDisco]

yea. upvote this for sure.

not a great solution, and definitely would prefer a persistent sidebar width for each view, but i found unassigned commands:
workbench.action.increaseViewSize and workbench.action.decreaseViewSize

atleast i don't have to go for the mouse and the command works with both the primary and secondary sidebars, but it is still annoying

{
        "key": "shift+cmd+\\",
        "command": "workbench.action.increaseViewSize",
        "when": "sideBarVisible || auxiliaryBarVisible"
    },
    {
        "key": "shift+cmd+/",
        "command": "workbench.action.decreaseViewSize",
        "when": "sideBarVisible || auxiliaryBarVisible"
    },
    {
        "key": "cmd+b",
        "command": "workbench.action.toggleAuxiliaryBar",
        "when": "auxiliaryBarVisible"
    },

i'm driving a ZSA voyager so my / and \ are more conveniently located, but the third one to toggle the auxiliary bar closed is pretty clutch, it saves having to remember a different keybinding

[ilyakonrad]

+1 on this one.

It is extremely annoying to stretch the sidebar (where the folder tree is) manually to an adequate width every time I open another project in a new window via "Open recent".

Not only should it open fullscreen right away, like the current project is, but also the sizing of panels should be the same as well.

Like, what the hell is this?

[mrivanandreev]

@ilyakonrad I think this setting would be a good fit for your case: "window.newWindowDimensions": "maximized". This annoys me too, and I just found a solution to this problem in the documentation

[ilyakonrad]

@mrivanandreev Thanks a lot! Works like a charm!

[AurevoirXavier]

In Zed, we have:

"centered_layout": {
	"left_padding": 0.25,
	"right_padding": 0.25
},

Accepting a ratio as the arg is also a good choice.

[K2adir]

+1 up for this request. Now, with AI on the sidebar this feature has become even more crucial

[dannypernik]

{
"key": "shift+cmd+\",
"command": "workbench.action.increaseViewSize",
"when": "sideBarVisible || auxiliaryBarVisible"
},
{
"key": "shift+cmd+/",
"command": "workbench.action.decreaseViewSize",
"when": "sideBarVisible || auxiliaryBarVisible"
}

@FloppyDisco expanding on this a bit, as your shortcuts have the reverse effect if focus is not in the appropriate view. The following will focus on the sidebar and thus always increase or decrease the width of that view:

{
    "command": "runCommands",
    "key": "shift+cmd+[",
    "args": {
      "commands": ["workbench.action.focusSideBar", "workbench.action.decreaseViewSize"]
    },
    "when": "sideBarVisible"
  },
  {
    "command": "runCommands",
    "key": "shift+cmd+]",
    "args": {
      "commands": ["workbench.action.focusSideBar", "workbench.action.increaseViewSize"]
    },
    "when": "sideBarVisible"
  },

Note that I removed auxiliaryBarVisible from when statement because I'm generally using the sidebar when resizing and want the focus to go there. If you want to also resize when auxiliaryBarVisible, you'll want to use workbench.aciton.focusActiveEditorGroup instead of workbench.action.focusSideBar to move focus to the editor window and resize it.

https://stackoverflow.com/a/77051498/3295556

[FloppyDisco]

@dannypernik

that's pretty slick. you have a keybinding that allows you to adjust the explorer size from anywhere.

I wanted a bit different behavior, I wanted an increaseViewSize and decreaseViewSize keybinding that worked in any view and always changed the view size of whatever i am currently focused on.

my actual .json is this:

  {
    "key": "shift+cmd+/",
    "command": "workbench.action.decreaseViewSize",
    "when": "sideBarFocus || panelFocus || auxiliaryBarFocus"
  },
  {
    "key": "shift+cmd+\\",
    "command": "workbench.action.increaseViewSize",
    "when": "sideBarFocus || panelFocus || auxiliaryBarFocus"
  },
  {
    "key": "shift+cmd+\\",
    "command": "workbench.action.increaseViewWidth",
    "when": "editorFocus || inSettingsEditor || inSearchEditor || inSettingsJSONEditor || inKeybindingsSearch"
  },
  {
    "key": "shift+cmd+/",
    "command": "workbench.action.decreaseViewWidth",
    "when": "editorFocus || inSettingsEditor || inSearchEditor || inSettingsJSONEditor || inKeybindingsSearch"
  },

note: here i set "increaseViewWidth" for my editor commands. because i usually split left and right.

there are:

• increaseViewWidth
• increaseViewHeight
  and
• increaseViewSize

increaseViewSize does both simultaneously when in an editor. You will not really be able to see this affect unless you have an editor split both left-right AND up-down.

also note: for some reason increaseViewSize is the only one that works for view in the sidebars. don't know why.

[dannguyen]

@dannypernik I hope the feature proposed by this issue goes through but until then, your snippet was exactly what I needed. Thanks!