Prevent sidebery collapse when a menu is open

[KaelWD]

Context menu hides titles:

Move to window/create tabs panel dialogs collapse:

Panel collapses when dragging tabs:

Screencast_20250617_163600.mp4

[KaelWD]

This might not actually be possible without another extension, I can target #root:not(:is(:hover, :has(:active))) in sidebery styles but #sidebar-box:is(:hover, :has(:active)) in userChrome.css doesn't trigger because the active element is in a different document.

#root {
  .top-horizontal-box, 
  .BottomBar {
    transition: opacity 0.25s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
  }

  &:not(:is(:hover, :has(:active))) {
    .top-horizontal-box, 
    .BottomBar {
      opacity: 0;
      transition: all 0s;
    }
    
    .scroll-container {
      overflow: hidden;
      
      > * {
        width: fit-content;
      }
    }
    
    .Tab {
      padding-left: 0 !important;
      
      > .body > *:not(.fav) {
        display: none !important;
      }
    }
    
    .new-tab-btns {
      svg {
        opacity: 0 !important;
        transition: opacity 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
      }
      
      transition: all 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
    }
    
    .top-shadow, 
    .bottom-shadow, 
    .scroll-container .new-tab-btns::before {
      display: none;
    }
  }
}

@media not -moz-pref("shimmer.disable-collapsing-sidebar") {
	#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
		width: var(--shimmer-cbar-collapsed-width) !important;
		min-width: 0 !important;
		z-index: 999 !important;
		transition: width 0.25s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
		
		~ #tabbrowser-tabbox {
			transition: margin 0.25s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
			
			@media -moz-pref("shimmer.sidebar-right-side") {
				margin-right: 0 !important;
			}
			
			@media not -moz-pref("shimmer.sidebar-right-side") {
				margin-left: 0 !important;
			}
		}

		&:hover,
		&:has(:active) {
			width: var(--shimmer-cbar-expanded-width) !important;
			
			~ #tabbrowser-tabbox {
				@media -moz-pref("shimmer.sidebar-right-side") {
					margin-right: calc(-1 * var(--shimmer-cbar-expanded-width) + var(--shimmer-cbar-collapsed-width)) !important;
				}
				
				@media not -moz-pref("shimmer.sidebar-right-side") {
					margin-left: calc(-1 * var(--shimmer-cbar-expanded-width) + var(--shimmer-cbar-collapsed-width)) !important;
				}
			}
		}
	}
}

[simakma5]

Hi @KaelWD, have you found a solution/workaround for this issue? I just started using shimmer and I find this to be quite a disruptive behaviour as well.

[KaelWD]

I ended up just disabling the collapsing sidebar. I have a 32" monitor so losing a couple hundred px usually isn't really a big deal and I can hide it manually if I need more space.

[MaxHasBeenUsed]

Weirdly I do not have this issue.. Tested with latest files from source and Firefox 145.0.1

[simakma5]

@MaxHasBeenUsed which OS are you using? I found out it only happens on my main driver, which is a Fedora Linux laptop. On my Windows machine, all behaves perfectly like you demonstrate.

[nuclearcodecat]

i'm pretty sure it doesn't happen to me either. arch linux, wayland.

[MaxHasBeenUsed]

Reproduced successfully on Arch KDE.

I noticed in my above recording my cursor was a normal arrow cursor, but in the recording from KaelWD's recording shows a drag/hand cursor. This is pretty sus...

On my machine if I use the css for sidebery as is, I can't even drag the tab (easily). See:

Screencast_20251122_005430.webm

Inspired by KaelWD , I replaced every #root:not(:hover) with #root:not(:hover):not(:active), at least now I can see the blue arrows...

Screencast_20251122_010406.webm

[nuclearcodecat]

the panel collapse when dragging is a firefox issue. see this reddit thread

i tried applying some styles inside of sidebery using its data-drag property, but unfortunately that property is not exposed to #sidebar-box, which i could use to fix the issue. the code below is the proof of concept i managed to put together – sidebery doesn't "collapse" when dragging but the collapsing sidebar must be disabled anyway

#root:not(:hover):not([data-drag=true]) .top-horizontal-box, #root:not(:hover):not([data-drag=true]) .BottomBar {
	opacity: 0;
	transition: all 0s;
}
#root .top-horizontal-box, #root .BottomBar {
	transition: opacity 0.25s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}
#root:not(:hover):not([data-drag=true]) .scroll-container {
	overflow: hidden;
}
#root:not(:hover):not([data-drag=true]) .scroll-container > * {
	width: fit-content;
}
#root:not(:hover):not([data-drag=true]) .Tab {
	padding-left: 0 !important;
}
#root:not(:hover):not([data-drag=true]) .Tab > .body > *:not(.fav) {
	display: none !important;
}
#root:not(:hover):not([data-drag=true]) .new-tab-btns svg {
	opacity: 0 !important;
	transition: opacity 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#root:not(:hover):not([data-drag=true]) .new-tab-btns {
	transition: all 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#root:not(:hover):not([data-drag=true]) .top-shadow, #root:not(:hover):not([data-drag=true]) .bottom-shadow, #root:not(:hover):not([data-drag=true]) .scroll-container .new-tab-btns::before {
	display: none;
}