Showing results for 
Show  only  | Search instead for 
Did you mean: 
Making moves
Status: New idea

I have the following requests:

  • Allow the sidebar to be wider
  • Next to the current behaviour (neighbouring the #appcontent) implement a fully floating sidebar and a hybrid sidebar which I explain herafter

Hybrid sidebar:

The sidebar has a default width until which it behaves as a neighbour to the page content (like it is behaving today). If the sidebar gets extended and exceeds its default width, it appears above/floats the page content. If its shrinked below its default width, the page content takes up the available space (also the present behavior).

I also created a userChrome.css for the hybrid sidebar (see below)




#browser {
  --sidebar-width: calc(var(--sidebar-default-width) + min(0px, var(--adder))) !important;
  --sidebar-default-width: 300px !important;
  --adder: 0px !important;
  --sidebar-min-width: 100px !important;
  position: relative !important;
  display: grid !important;
  grid-template-columns: clamp(var(--sidebar-min-width), var(--sidebar-width), 100dvw) 1fr !important;

#sidebar-box {
  left: 0 !important;
  top: 86px !important;
  bottom: 0 !important;
  min-height: unset !important;
  z-index: 2 !important;
  max-height: calc(100dvh - 86px);
  min-width: var(--sidebar-min-width) !important;
  max-width: unset !important;
  width: calc(var(--sidebar-width) + max(0px, var(--adder))) !important;
  order: 1 !important;

splitter {
  top: 0 !important;
  bottom: 0 !important;
  left: max(var(--sidebar-min-width), calc(var(--sidebar-default-width) + min(0px, var(--adder)))) !important;
  height: 100dvh !important;
  display: flex !important;
  order: 3 !important;

#appcontent {
  height: 100dvh !important;
  max-height: unset !important;
  min-height: 100dvh !important;
  order: 2 !important;




 By dragging the 'splitter'-handle the '--adder'-variable gets adjusted. CSS takes care of the rest.

Instead of implementing it via grid and grid-template-columns one could of course choose to adjust the widths of the '#appcontent' and 'sidebar-box'

Sidebar default
& next to the page content

hybrid sidebar defaulthybrid sidebar default

Sidebar shrinked
& next to the page content

hybrid sidebar shrinkedhybrid sidebar shrinked

Sidebar extended
& above/floating the page content

hybrid sidebar extendedhybrid sidebar extended

1 Comment
Status changed to: New idea
Community Manager
Community Manager

Thanks for submitting an idea to the Mozilla Connect community! Your idea is now open to votes (aka kudos) and comments.