Crumb
c/FirefoxCSS · by Godie@lemmy.world · 1y

[solved] 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?

2 points · 3 comments · view on lemmy.world

3 Comments

MrOtherGuy@lemmy.world · 1 pts · 1y (2 replies)

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.world · 1 pts · 1y (1 reply)

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

MrOtherGuy@lemmy.world · 2 pts · 1y

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.