3mo ago

How to remove close button when the tab size is smaller

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?

3 comments

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

#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 } }
- Wow, I don't know how it works but works, I will research 'CSS container', to learn. I appreciate your help. 💙
  
  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.