Sidebery Pinned Tabs and Margin Issues

[SilverFang13]

Describe the bug (A detailed description of what the bug is.)

After importing the sidebery json file into sidebery the pinned tabs on collapse get smaller like they should but stay in a line as apposed to the grid view show in the preview example. In addition I would like to add a margin to the left side of the screen (where sidebery is for me) that reflects the view of the one on the right as currently sidebery is pressed right up against the left side of the window/screen

Desktop (please complete the following information):

• OS: [example: Linux] Windows 10
• Browser Version: [example: Firefox v123] Firefox 125.03

Screenshots (If applicable, add screenshots to help explain your problem.)

[SilverFang13]

I'm also having a problem where the preview window on the sidebar stays even after I stop hovering over the tab. I don't know if there is a way to fix this that I missed but if it's just a sidebery issue it's not a big deal.

(I can't seem to snip my screen with my courser showing but I've roughly circled the mouse position in the image)

[soulhotel]

I'm also having a problem where the preview window on the sidebar stays even after I stop hovering over the tab.

This is sidebery; you can adjust this in the Tabs preview section of sidebery settings. Perhaps adjusting the delay as well.

[soulhotel]

As for the true problem, you seem to be missing the sidebar header, and your spacing is abnormal to what the theme would do.

Im assuming you had different styling for sidebery before importing the themes styling, yes? And have userChrome modifications before using the theme too?

Can you share a screenshot of your about:config page with the sidebar autohide set to false, like so:

[SilverFang13]

Of course

I actually purpously removed the sidebar header. I un-commented the remove header on line 81 of position-verttab-gone.css and the moved the top left and top right border changes from "#sidebar-header" to "#sidebar" in all-global-positioning.css

[soulhotel]

Set ultima.tabs.autohide to true, I think this is causing the spacing issue, I'll have to fix that for next release..

As for the pinned tabs, if you had previous styling in sideberry its possible that it wasnt overwritten, ive experienced this sometimes. Try going into the Styles Editor remove everything then reapply the styling below:

(click me)

/*--------------------------------------------------*/ /*--Header Panel--*/ #root.root {--toolbar-el-overlay-selected-bg: #0d0d0dff;} #root.root {--toolbar-el-overlay-hover-bg: #0d0d0dff;} #root.root {--toolbar-el-overlay-active-border: #ffffffff;};} #root.root {--toolbar-el-overlay-active-bg: #0d0d0dff;} #root.root {--toolbar-el-overlay-active-border: #1a1a1aff;} #root.root {--nav-btn-accent: #ffff80ff;} @media (prefers-color-scheme: light){ #root.root {--toolbar-el-overlay-selected-bg: rgb(69, 107, 200);} #root.root {--toolbar-el-overlay-hover-bg: rgb(69, 107, 200);} #root.root {--toolbar-el-overlay-active-bg: rgb(69, 107, 200);} } .NavigationBar .nav-item .audio {display:none !important;} /*--------------------------------------------------*/ /*--Pinned Tabs--*/ #root.root {--tabs-pinned-width: 24vw;--tabs-pinned-height: 40px;} @media (max-width:250px) { #root.root {--tabs-pinned-width: 23.5vw;--tabs-pinned-height: 40px;} } @media (max-width:165px) { #root.root {--tabs-pinned-width: 23vw;--tabs-pinned-height: 40px;} } @media (max-width:125px) { #root.root {--tabs-pinned-width: 22vw;--tabs-pinned-height: 40px;} } @media (max-width:84px) { #root.root {--tabs-pinned-width: 20.5vw;--tabs-pinned-height: 19px;} .PinnedTabsBar .tab-wrapper .fav {transform:scale(0.6);} } @media (max-width:42px) { #root.root {--tabs-pinned-width: 16px;--tabs-pinned-height: 19px;} .PinnedTabsBar .tab-wrapper .fav {transform:scale(0.6);} } /*--------------------------------------------------*/ /*--Tabs--*/ #root.root {--tabs-normal-fg: rgb(251, 251, 254);} #root.root {--tabs-activated-bg: #0d0d0dff;} #root.root {--general-border-radius: 10px;} #root.root {--general-margin: 2px;} #root.root {--frame-el-overlay-selected-border: #ffffffff;} #root.root {--frame-el-overlay-selected-bg: #0d0d0dff;} #root.root {--tabs-border-radius: 10px;} #root.root {--tabs-indent: 30px;} @media (prefers-color-scheme: light){ #root.root {--frame-el-overlay-selected-bg: rgb(69, 107, 200);} #root.root {--frame-el-overlay-selected-border: rgb(69, 107, 200);} } .Tab[data-pin="false"] .fav {margin-left:9px;} #root.root {--tabs-audio-btn-width: 30px;} /*--------------------------------------------------*/ /*--Background--*/ @media (prefers-color-scheme: dark) { /*--Body--*/ #root.root {--frame-bg: rgba(35, 35, 42, 1);} /*--Header--*/ #root.root {--toolbar-bg: rgba(35, 35, 42, 1);} } @media (prefers-color-scheme: light) { /*--Body--*/ #root.root {--frame-bg: rgba(216, 217, 248, 1);} /*--Header--*/ #root.root {--toolbar-bg: rgba(216, 217, 248, 1);} } /*--------------------------------------------------*/ /*--Bookmarks--*/ #root.root {--bookmarks-indent: 0px;} /*--------------------------------------------------*/ /*--Context Menu--*/ #root.root {--ctx-menu-padding: 3px;} @media (prefers-color-scheme: light) { #root.root {--popup-bg: rgb(69, 107, 200);} } /*--------------------------------------------------*/ #root.root {--notification-bg: #111117ff;} #root.root {--notification-fg: rgb(251, 251, 254);}

[SilverFang13]

Set ultima.tabs.autohide to true, I think this is causing the spacing issue

It was indeed what was causing my spacing issue.

As for the pinned tabs I had no luck getting them to work by fully resetting the sidebery import file to before my adjustments nor just changing the Styles editor to the provided code (with *'s added to fix the comments). I attached a pdf bellow showing a compassion of my sidebery styling and the provided just in case.

sideberyCompare.pdf

[soulhotel]

Odd, I tested it on a fresh install, even toggling between proton, compact, etc, in sidebery doesnt break the pinned tab sizing, so im assuming this is strictly an issue with the style editor.

In the Style Editor, try setting the Pinned Tabs width for the media query under 42px to something else. For example, when I set it to 18 it looks like your first screenshot (one column of 3 tabs). When set below 16 (like 14) it should adjust further.

The issue is basically the pinned tabs width overflowing. But hopefully this serves as a temporary fix until i refine the styling in the future.

[SilverFang13]

Setting it to 15 or lower does fix the issue

What is the @ media (max-width:42) referencing? I'm not seeing an obvious place in the code where max-width is being set to the px amounts @ media is checking to set pinned tab widths

[soulhotel]

Simply put - each media query changes the size of the pinned tabs depending on the width of the Sidebar, therefore keeping it consistent (4 columns when expanded, and 2 columns when collapsed). While also keeping the same (2-4) format when sidebar autohide is off. Really only the last 3 media queries matter, the last being a collapsed sidebar width of <42 and the third to last being a reasonable size to display 4columns-2rows of pinned tabs >165px. And the two media queries at the top are just for future customization, when the sidebar is over 165px, styling the pinned tabs are very flexible.

I found that using animations (transitions) to set the widths wasn't consistent, like if you manually resize the sidebar to 170px for example, it could produce 3 columns with uneven rows. As expected from an uncontrolled transition. So I used this method instead.

[soulhotel]

To be more clear @media (max-width:42px) is checking for the width of the Sidebar. Then I set the size (width and height) of Pinned Tabs depending on if its detected in that media query.