Tab preview with Auto-show/hide sidebar

[UaHummer]

When the about:about page (or a similar one) is open, the Tab Preview shows up just fine. But as soon as you switch to a site (like example.com for a video), it ends up appearing under the sidebar. Any way to fix this?

2025-02-21-07.12.38.625136371.mp4

my userChrome.css

/*Auto-hide sidebar when fullscreen*/

#main-window[inFullscreen] #sidebar-box,

#main-window[inFullscreen] #sidebar-splitter {
  display: none !important;
  width: 0px !important;
}

/* Hide main tabs toolbar */

/*#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
    opacity: 0;
    pointer-events: none;
}

#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}*/

/* Only works in Firefox if layout.css.has-selector.enabled is set to true in about:config . */
html#main-window body:has(#sidebar-box[sidebarcommand=treestyletab_piro_sakura_ne_jp-sidebar-action][checked=true]:not([hidden=true])) #TabsToolbar {
  visibility: collapse !important;
}

/* Sidebar min and max width removal */

#sidebar-box {
    max-width: none !important;
    min-width: 0px !important;
}
/* Hide splitter, when using Tree Style Tab. */

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
    display: none !important;
}
/* Hide sidebar header, when using Tree Style Tab. */

/*#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    visibility: collapse;
   }*/

/* Shrink sidebar until hovered, when using Tree Style Tab. */
:root {
    --thin-tab-width: 25px;
    --wide-tab-width: 400px;
}

#sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) {
    min-width: var(--wide-tab-width) !important;
    max-width: none !important;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
    position: relative !important;
    transition: all 300ms !important;
    min-width: var(--thin-tab-width) !important;
    max-width: var(--thin-tab-width) !important;
    z-index: 5 !important;
    /*z-index: calc(var(--browser-area-z-index-tabbox, 10000) + 1) !important;*/
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
    transition: all 100ms !important;
    /*transition-delay: 0.2s !important;*/
    min-width: var(--wide-tab-width) !important;
    max-width: var(--wide-tab-width) !important;
    margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    transition: all 100ms !important;
    overflow: hidden !important;
    margin-left: -8px !important; 
}

[piroor]

Firefox says the video file is broken and unplayable. Could you recapture that?

[UaHummer]

I re-recorded the video and replaced it.

[piroor]

Hmm, Firefox still says it is broken, but successfully played with VLC media player.

The userChrome.css hack shrinks the width of the sidebar and makes sidebar frame covering on the content area. You need to use userContent.css to shift TST's tab preview panel, like as (maybe):

#tab-preview-panel { left: 200px !important; }

[UaHummer]

Works when # is replaced with .
.tab-preview-panel { left: 200px !important; }

but it has the opposite effect

2025-02-21-10.03.40.624843784.mp4

[piroor]

You need to add something more to limit the style declaration to be applied only on webpages. For example:

:root:not(.sidebar) .tab-preview-panel { left: 200px !important; }