Can we make the sidebar wider?

[chlorine3545]

Captchas

• [X] I have read the instructions.
• [X] I have searched existing issues and avoided creating duplicates.
• [X] I am not filing an enhancement request.

What happened?

Hello there.

Might not strictly be a bug, but it's something I thought worth mentioning. From my perspective, the sidebar appears to be quite narrow compared to Arc's design.

So, how can we make it a little wider?

Thanks a lot!

Reproducible?

• [ ] I have checked that this issue cannot be reproduced on Mozilla Firefox.

Version

1.0.0 alpha 37

What platform are you seeing the problem on?

macOS - aarch64

Relevant log output

No response

[tux-arch]

Yes, you can make the sidebar wider! Open your Zen profile folder (about:support > "Profile Directory"). In the chrome folder, create a userChrome.css file (if it doesn't exist) and add this:

@media (-moz-bool-pref: "zen.view.sidebar-expanded") {
  #navigator-toolbox:is(#navigator-toolbox[zen-user-hover="true"]:hover, #navigator-toolbox[zen-user-hover="true"]:focus-within, #mainPopupSet[zen-user-hover="true"]:has(> #appMenu-popup:hover) ~ toolbox, #navigator-toolbox[zen-user-hover="true"]:has([open="true"]:not(tab):not(#zen-sidepanel-button)), :not([zen-user-hover="true"])) {
    --zen-navigation-toolbar-min-width: 200px !important;
    width: 300px;
  }
}

Adjust the width: 300px to your preference.

[chlorine3545]

Yes, you can make the sidebar wider! Open your Zen profile folder (about:support > "Profile Directory"). In the chrome folder, create a userChrome.css file (if it doesn't exist) and add this:

@media (-moz-bool-pref: "zen.view.sidebar-expanded") {
  #navigator-toolbox:is(#navigator-toolbox[zen-user-hover="true"]:hover, #navigator-toolbox[zen-user-hover="true"]:focus-within, #mainPopupSet[zen-user-hover="true"]:has(> #appMenu-popup:hover) ~ toolbox, #navigator-toolbox[zen-user-hover="true"]:has([open="true"]:not(tab):not(#zen-sidepanel-button)), :not([zen-user-hover="true"])) {
    --zen-navigation-toolbar-min-width: 200px !important;
    width: 300px;
  }
}

Adjust the width: 300px to your preference.

Awesome. Thank you tux-arch, you really make my day :)

[chlorine3545]

I reopen this issue COZ after updating to 1.0.1-a.13, the method above doesn't work anymore :(

[chlorine3545]

Update: after updating to 1.0.1-a.14 (Don't know if it works on 13), you can resize the sidebar by (disabling compact mode and) dragging the bar edge directly! A clever and user-friendly design :)