Hi, By default, I set the tab-close-button always visible, to use it like a tab-separator, but I would like to remove the tab-close-button when the tab gets smaller than some specific size. For example, in the image I attached, I would like to remove the close button but when the tab gets a little bigger the close button should appear. I used this code to make the tabs smaller that default:

.tabbrowser-tab {
      &:not([pinned]) {
        #tabbrowser-tabs[orient="horizontal"] &[fadein] {
          --tab-min-width-pref: calc(16px + 2 * 10px + 2px) !important; !important;
          --tab-min-width: var(--tab-min-width-pref) !important;
        }
      }
    }

So, It is possible to remove the close button when the tab size is smaller than 50px or something like that?

  • MrOtherGuy@lemmy.worldM
    1·
    3 months ago

    You can actually use css container queries for this. Would go like this:

    #tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[fadein]:not([pinned]){
  container-name: tabtab;
  container-type: inline-size;
}
@container tabtab (width < 50px){
  .tab-close-button{
    display: none
  }
}
    • Godie@lemmy.worldOP
      1·
      3 months ago

      Wow, I don’t know how it works but works, I will research ‘CSS container’, to learn. I appreciate your help. 💙

      • MrOtherGuy@lemmy.worldM
        2·
        3 months ago

        Yeah, so I haven’t actually come across very many situations where containers or container queries are useful (in the context of Firefox UI) but in this specific case they actually solve the issue perfectly.