[Bug] Tab overlaps each other at reduced heights

[azhongzl]

Abstract

When using the Photon profile at small tab heights, one tab overlaps on each other.

Steps to reproduce

1. Start Firefox with clean profile.
2. Install TST.
3. Reduce tab height and enable hovered tab in user styles

   
   /* Change tab height */
   tab-item {
   --tab-size: 18px !important;
   }
   tab-item  tab-item-substance {
   height: var(--tab-size);
   }

/ This makes the hovered tab noticeable by modifying the color and font / tab-item tab-item-substance:hover { background: #aaaaaa !important; opacity: 1; }

 4. Open 3 tabs, and click the 2nd one
 5. We can see the active tab overlaps the previous and next tab
 6. Hover on the 3rd tab, we can see it overlaps the 2nd tab

## Expected result
1. Active tab should not overlap other tabs
2. Hovered tab should not overlap other tabs

## Actual result
1. Active tab overlaps other tabs
2. Hovered tab overlaps other tabs

## Environment

 * Platform (OS): MacOS
 * Version of Firefox: 123.0.1 (64-bit)
 * Version (or revision) of Tree Style Tab: 4.0.1

[piroor]

You need to do more:

/* Change tab height */
tab-item {
  --tab-size: 18px !important;
}
tab-item  tab-item-substance {
  max-height: var(--tab-size) !important;
  min-height: var(--tab-size) !important; /* added */
  padding-top: 0 !important; /* added */
  padding-bottom: 0 !important; /* added */
}

/* This makes the hovered tab noticeable by modifying the color and font */
tab-item tab-item-substance:hover {
  background: #aaaaaa !important;
  opacity: 1;
}

[azhongzl]

Thanks, should we update the wiki so that other guys know this as well?

[piroor]

It is a public wiki so it is OK to update if you needed!

[azhongzl]

Sounds great, I can update it. But I am not sure if this also works for the old version, e.g. v3.9.22?

[azhongzl]

Just tested, also works for v3.9.22, will update the wiki!

[azhongzl]

Updated the wiki. Will close the ticket.