prevent pinned tab collapsing

[ItayHadas]

Description

Dear Author, I use a css userchrome script to auto-collapse your sidebery- works wonderfully! (https://github.com/mbnuqw/sidebery/issues/556#issue-1109950396)

Is it possible to prevent the pinned tabs collapse while collapsing the sidebar? many thanks!

Please see animation:

[KAGEYAM4]

yes +1 for this, I like to have Pinned tab Position to Top or Panel and i am using the same collapsing feature. after the sidebar collapses , tabs move to bottom in the strip . and i can't see which tab i am working on or the tabs that i opened , opened or not. Also can't use Pinned tab position Left or Right as this will totally hide the normal tabs in collapsed mode

@ItayHadas , did you found any solution to this ?

[ItayHadas]

@PhoenixCODE2322 unfortunately no - I moved back to Tree style tab - there you can manage it through firefox's userchrome.css

[dexeonify]

In v5, you can enable "Show titles of pinned tabs" under Sidebery Settings / Pinned Tabs to make pinned tabs behave like normal tabs. This prevents the tabs from shifting around too much when shrinking/expanding. However, they now take up as much space as normal tabs (instead of only showing the favicons), so you may not like this solution.

Alternatively, you can prevent the pinned tabs from wrapping using this CSS:

.PinnedDock {
    flex-wrap: nowrap !important
}
.PinnedTab { 
    overflow: hidden !important;
    min-width: var(--tabs-pinned-width) !important
}

Source. Disclaimer: I didn't test the CSS since I'm on v5. The disadvantage is, you can't see all the pinned tabs when the sidebar is collapsed.

[KAGEYAM4]

Thank you for this. I decided to totally hide side bar and it shows when mouse touches the corner using this css

/*   Auto hide sidebar   */
#sidebar-box:not([hidden]) {
  border-right: solid 1px var(--chrome-content-separator-color) !important;
  box-shadow: 2px 0 14px rgba(0, 0, 0, 0.13) !important;
  overflow: hidden;
  height: 100%;
  position: fixed;
  min-width: 0 !important;
  max-width: 0 !important;
  display: block;
  z-index: 2;
  opacity: 0}

[sizemode=normal] #sidebar-box {max-width: 4px !important}

#appcontent {margin-left: -6px}

@media(-moz-windows-default-theme) {
  [sizemode=normal] #sidebar-box {height: calc(100% - 10px)}
  #appcontent {margin-left: 0}
}

#sidebar-box:not([hidden]):hover {
  width: 321px !important;
  max-width: 100% !important;
  opacity: 1}

#sidebar {
  width: 320px !important;
  height: 100%}

.sidebar-splitter {--sidebar-border-color: var(--chrome-content-separator-color)}

I had one question , i always have to ask some for a code of css to something particular. If i learn css, will be able to do these things ? Now that , i am loving every aspect of FireFox with CSS , its awesome, the greatest browser.

[dexeonify]

You don't really learn CSS the traditional way, because it's really vast, like HTML. But yes, learning the basics is sufficient for customizing Firefox or Sidebery. You can also learn by reading CSS codes written by others.

To find the correct selectors, you should use the browser toolbox (for Firefox UI) or about:debugging (for Sidebery). Then, you can look up CSS properties on MDN.

[Sazoji]

Alternatively, you can prevent the pinned tabs from wrapping using this CSS:

.PinnedDock {
    flex-wrap: nowrap !important
}
.PinnedTab { 
    overflow: hidden !important;
    min-width: var(--tabs-pinned-width) !important
}

Unfortunately, in the public release of v5 at least, this functionality with flex-wrap isn't working anymore in the styles editor.

Nevermind! it's called PinnedTabsBar now, just gotta change the name

[mbnuqw]

Closing as workaround existed (put it in sidebery settings > styles editor):

.PinnedTabsBar {
  --min-tabs-in-row: 3;
  min-width: calc((var(--tabs-pinned-width) + var(--tabs-margin)) * var(--min-tabs-in-row) + var(--tabs-margin));
}