Assitance Request: Bottom Most Tab Seems to Hide when I have too many tabs

[Vindickator]

Hello all,

Could you please help me on this problem?

My situation is that I have 100+ tabs and the bottom most tab gets hidden.
I know that this is mainly due to the different tab sizes I have set for active and inactive tabs,
If I set uniform size for both the active & inactive tabs then there is no problem, but I would like to have that differentiation in visuals personally to know which tabs I am on.

My Frankenstein code from the TST Options

/* Custom background of the tab bar #2731 */
:root.sidebar #background {
  background: #2B2932;
}


/* Show scrollbar in the tab bar right side */
:root.left #tabbar {
  direction: ltr;
  overflow-x: hidden;
}


/* Show Tab counter even for expanded tree and not just collapsed tree https://github.com/piroor/treestyletab/discussions/3135 */
tab-item[data-child-ids]:not(.subtree-collapsed) .counter {
  display: initial !important;
}


/* Default size for all tabs*/

tab-item {
  --tab-size: 25px !important;
}

/* Active tab to become larger*/
tab-item.active {
  --tab-size: 35px !important;
  /*padding-top: 0 !important;*/
  /*padding-bottom: 0 !important;*/
}

/* Active tab text to wrap around*/
/*
tab-item.active:not(.collapsed) tab-label {
  overflow: unset;
  white-space: unset;
  padding-top: 50 !important;
  padding-bottom: 50 !important;
}
*/

/* Active tab background colour */
tab-item.active tab-item-substance{
  background-color: rgba(169,54,218,0.84);
 /* background-color: rgb(177,23,23);*/
}


tab-item.active .label-content {
  font-size: 13px;
  /*font-color: rgb(0,255,38);*/
  font-weight: bold;
}


tab-item.active tab-twisty,
tab-item.active tab-counter {
  color: #000000;
}


tab-item.active .label-content{
  color: #05D3EF;
   text-shadow: 0.5px 0.5px #000000;
}

/* Container colored underline for tab #2346*/
.contextual-identity-marker {
  margin: 0 !important;
  
  top: auto !important;
  bottom: 0 !important;
  left: 0.5em !important;
  right: 0.5em !important;

  width: auto !important;

  max-width: none !important;
  height: calc(var(--favicon-size) / 5) !important;
}

/* change the base box to layout position:absolute box, from the root container box to the tab item */
:root.group-tab li {
  position: relative;
}


/* Created code from "colour tab based on container colour, modded to show only a vertical line for the left side _vin, doesn't work properly when there are multiple tabs involved */
/*
:root.sidebar .contextual-identity-marker {
  margin: 0 !important;
  position: absolute !important;
  pointer-events: none;
  z-index: 0;
  
  top: 0.2em !important;
  bottom: 0.2em !important;
  left: 0 !important;
  right: 18.9em !important;
  
  width: unset !important;
  height: unset !important;  
}
:root.sidebar tab-label {
  z-index: 1000;
}

*/


/* Tab numbering and counting */
#tabbar {
  counter-reset: vtabs atabs tabs;
  /* vtabs tracks visible tabs, atabs tracks active tabs, tabs tracks all tabs */
}
tab-item:not(.collapsed):not(.discarded) {
  counter-increment: vtabs atabs tabs;
}
tab-item:not(.collapsed) {
  counter-increment: vtabs tabs;
}
tab-item:not(.discarded) {
  counter-increment: atabs tabs;
}
tab-item {
  counter-increment: tabs;
}



/* colored background for closebox on hover */
tab-item tab-closebox::before {
  border-radius: 10px; /* vary between 0 and 10 to make the background rounder */
}
/* I find these work well on my monitor (slightly darker than the normal tab color) but YMMV */
tab-item tab-closebox:hover::before {
  background: #c8c8c8;
  opacity: 1; /* defaults to 0.1 */
}
tab-item.active tab-closebox:hover::before {
  background: #96afc8;
}



/* Show close button only on hover */
.tab:not(:hover) .closebox {
  display: none;
}


/* Change styling of pending (unloaded) tabs */

tab-item.discarded tab-item-substance {
  opacity: 0.75;
}

/*
tab-item.discarded .label-content {
  color: #795548;
}
*/

/* Change styling of the favicon of pending (unloaded) tabs */
tab-item.discarded tab-favicon {
  opacity: 0.5 !important;
}


/* Tab counts in the bottom new tab button */
.newtab-button-box::after {
  content: var(--tab-count-text);
  pointer-events: none;
    
  position: absolute;
  left: 1em;

  /* TST 2.4.0 - Fix for Issue #1664 */
  background: rgba(0,0,0,0) !important;
  color: rgb(0,0,0);  /* added by _vin post v96 */
  mask: none !important;
}




/* Search also not working _ 12-Jun-24 */

How it looks now; These are bottom most tabs and the "New Discussion .." tab is becoming buried at the bottom a little bit.

Workaround I do; Adding one extra New Tab in the end/Right to make tabs visible

How it looks with the Default tab size; the bottom tab is fine and is not buried anymore

I did verify if the other addons are conflicting, by disabling those one-by-one and did not find problems due to those.

https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#for-version-2x
(Referring the above URL)
First I thought I could add some extra padding at the bottom to compensate for the odd tab sizes I have..
But I couldn't figure out how to do that.

Requesting your assistance on this problem please.

[irvinm]

If you disable (just for testing) "TST Tab Search", do you still have the problem?

[Vindickator]

Hello @irvinm,

Thanks for the reply,
yes you are correct indeed, I did already know that removal of the custom tab size for active tabs would make it not buried anymore.
I prefer to have the active tab larger since I typically have too many tabs open in the same window when I'm working or just browing (WikiRabbit hole problem is one example of how my browser ends up 😅)

May I know if there is a way to force the viewport size or give it extra 1 tab allowance at the bottom? Basically a blank space at the bottom if the exact size can't be calculated..

[irvinm]

I was going to suggest some different colors and/or borders for your active tab, but I see you already use colors a bit. I change the color and give it a white border to draw my eye to the active tab.

I am not aware of any way to change this (buffer, calculation changes, etc.) via CSS as all of that is done in JS on the TST side. @piroor any thoughts here? [I had a similar challenge a while ago where I wanted to change the pinned tabs dimensions but the calculations made some challenges with the main tabs, so again I just left the dimensions at their original size and used formatting the best I could]

[Vindickator]

This 'border' idea is nice.

I will experiment on this part with 25px for both the active and inactive tabs for the time being.
Thank you @irvinm .

I would still like to await on knowing if there can be different tab sizes in the list, hence would request to leave this topic open for few more weeks to know if there are new ideas to achieve this.

[irvinm]

@Vindickator I just remembered having a similar discussion about something else, but piroor did confirm that the tab sizes needed to be uniform. The issue is similar to yours in that they were trying to introduce non-uniform tab spacing and the result was tabs being clipped at the bottom.

Check it out: #3592 (comment)

[Vindickator]

Oh, I see..

I have begun to set and use a border line as you mentioned, so far it has worked fine.

Thanks for the idea.