How to display only tab icons in sidebar

[krisMG21]

I have my tabs as a side bar, and previously they were very compact, only displaying the icon. I don't know if it's because an update or I changed it accidentally, but I cannot find a way to change it back

[dosubot[bot]]

Hey @krisMG21! I'm here to help you with any bugs, questions, or contributions. Let's tackle this together!

To display only tab icons in the sidebar, you can modify the CSS to hide the tab labels and ensure that only the icons are visible. Here is a CSS snippet that you can use:

#tabbrowser-tabs .tabbrowser-tab .tab-content {
    display: flex;
    align-content: center;
    justify-content: center;
    padding: 0 !important;
}

#tabbrowser-tabs .tabbrowser-tab .tab-label-container {
    display: none !important;
}

Additionally, you can use the following CSS for a more compact tab display:

@container tab-container (max-width: 44px) {
    .tab-label-container {
        display: none !important;
    }
    .tab-content {
        justify-content: space-around !important;
    }
    .tab-close-button {
        display: none !important;
    }
}

This will hide the tab labels and ensure that only the tab icons are displayed in the sidebar ^[1][2].

Alternatively, you can check the Zen Browser's settings for a preference that allows toggling between icon-only and full tab display. This is controlled by the checkbox with the ID zenWorkspacesDisplayAsIconStrip, associated with the preference zen.workspaces.show-icon-strip ^[3].

To continue talking to Dosu, mention @dosu.

[natnael-wubet]

@dosu how do you modify the css? step by step?

[krisMG21]

Wow, the update was quick. Everything back to normal, I said nothing xd

[Geobert]

Hi, how do you do that?

[natnael-wubet]

@dosu how do you modify the css? step by step?