how do I move the sidebar to bottom of TST pane in userChrome.css?

[bossanovaorca]

related #3822

Firefox Nightly has pinned the sidebar as part of some larger upcoming sidebar changes. I would really appreciate it if anyone has a method to revert this change by modifying the userChrome.css as suggested in the issue above!

images taken from the linked issue:

before (the desired behavior with the sidebar items displayed horizontally at the bottom of the TST panel, although not shown in the screenshot):

after:

[irvinm]

It might be possible with some limitations and obviously any changes on the Firefox side would potentially break things. I took an initial stab with it as a proof of concept but I already see some issues with it (sidebar resizing doesn't work, hiding the sidebar still shows the action bar, etc.) There are probably other issues with this as well as I didn't test it very much ... fullscreen, etc.

userChrome.css

/* userChrome.css */

/* 1. Change the main browser area to a CSS Grid Layout */
#browser {
    display: grid !important;
    
    /* Columns: Sidebar width (auto) | Browser Content (rest of space) */
    grid-template-columns: auto 1fr !important;
    
    /* Rows: Top Sidebar (expands) | Bottom Sidebar (auto height) */
    grid-template-rows: 1fr auto !important;
    
    /* Define where things go:
       "sidebar"        = Tree Style Tabs
       "sidebar-footer" = Your 'sidebar-main' element
       "content"        = The web page/tabs area
    */
    grid-template-areas: 
        "sidebar content"
        "sidebar-footer content" !important;
}

/* 2. Assign the 'Tree Style Tab' sidebar to the top-left area */
#sidebar-box {
    grid-area: sidebar !important;
    
    /* Ensure it takes full width of the grid column */
    min-width: 100% !important; 
    max-width: unset !important;
}

/* 3. Assign 'sidebar-main' to the bottom-left area (UNDER the TST sidebar) */
#sidebar-main {
    grid-area: sidebar-footer !important;
    
    /* 4. LAYOUT UPDATE: Make contents horizontal (Row) */
    display: flex !important;
    flex-direction: row !important;
    
    /* Center items inside the footer */
    justify-content: center !important;
    align-items: center !important;
    
    /* Ensure it spans the full width of the sidebar column */
    width: 100% !important;
    
    /* Optional: Add a border on top to separate it from TST */
    border-top: 1px solid var(--sidebar-border-color, #ccc) !important;
}

/* 5. Assign the main web content to the right side */
#tabbrowser-tabbox {
    grid-area: content !important;
}

/* 6. CLEANUP: Hide the splitters that might break the grid layout */
/* You may want to keep 'sidebar-splitter' if you need to resize the width */
#sidebar-launcher-splitter {
    display: none !important;
}

/* Ensure the main resize splitter still works for the whole column */
#sidebar-splitter {
    grid-area: sidebar !important; /* Overlap with sidebar to allow resizing */
    position: relative !important;
    right: -5px !important; /* Shift it slightly to the edge */
    z-index: 100 !important;
    width: 5px !important;
}

.actions-list {
	flex-direction: row !important;
}

/* 1. Force the wrapper to lay out items horizontally (Row) */
.buttons-wrapper {
    display: flex !important;
    flex-direction: row !important;
    
    /* Optional: Prevent them from wrapping to a new line */
    flex-wrap: nowrap !important;
    
    /* Optional: Add spacing between the two groups */
    gap: 10px !important; 
    
    /* Optional: Center them vertically relative to each other */
    align-items: center !important;
}

/* 2. (Optional) Ensure both sections share the space equally */
.buttons-wrapper > .actions-list {
    width: auto !important;
}

.actions-list {
  & > moz-button:not(.tools-overflow) {
    &:first-of-type {
      --button-outer-padding-block-start: var(--space-xxsmall) !important;
    }
  }
}

[bossanovaorca]

appreciate the quick work you did on this! we'll probably have to deal with breaking changes as this moves from nightly to stable but nice job

[bossanovaorca]

@irvinm I've been unable to resize the sidebar, are you experiencing this as well?

[irvinm]

Yes, I mentioned that in my post as that was an odd behavior. I am not currently using this, but someone would need to debug it to see what that is happening.

[bossanovaorca]

ah I missed that, I was looking through the code comments and forgot to refer to the original post. thanks!