Dynamic multiline titles

[shimeoki]

I tried the code snippet from here, but it makes multiline constant on all tabs. So if you want more than two lines, every other tab with less content looks very awkward. And if you set it to 2 lines, all other lines will be hidden. For example, the Tree Style Tab extension does this: according to the content wrap, the height of the tabs changes dynamically. I really like your extension because of all of the other features and implementing this will be wonderful.

Also, while I was inspecting CSS, I found this: Firefox thinks this line of code in the snippet does nothing because the t-box is not a flex container.

[SunnyZebra]

Got me thinking. Seems possible. With the following css changes ~~seems to work for me.~~ it is visually correct, but sidebery code needs to be adjusted to get correct drag and drop tab position for dynamic tab heights.

Some additional changes to the 2-line example

not a copy paste example. Just quickly tested which css values needs to be changed

/* add inside .tab { }*/
.tab{
height:auto;
}

/* can be removed seems superflous */
.Tab .t-box {
/* 
  max-height: calc(var(--tabs-height) - var(--tabs-title-padding));
  overflow: hidden;
*/
}

/* remove line-height from .tab .title()
*/ 
.Tab .title {
 white-space: pre-wrap; /* still needed */
/*
  line-height: calc(
    (var(--tabs-height) - var(--tabs-title-padding)) / var(--tabs-title-lines)
  );
*/
  -webkit-line-clamp: var(--tabs-title-lines); /* important line to clamp to max lines*/
}

in root{} change --tabs-title-lines: 2; to desired max tab lines

short comment if it's working for other multiline users and i have not forgotten any other css line to mention.

Edit: Just reworked it on an empty custom css. ~~The following is the minimum needed css code to have nice dynamic multilines.~~

#root {
  --tabs-height: 36px;
  --tabs-title-lines: 3;
}

.Tab{
  height:auto;
}

.Tab .t-box{	
  min-height: calc(var(--tabs-height));

  display:flex;
  align-items:center;
}

.Tab .title {
  font-size: var(--tabs-font-size);
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--tabs-title-lines);
}

[shimeoki]

Got me thinking. Seems possible. With the following css changes seems to work for me. Some additional changes to the 2-line example

not a copy paste example. Just quickly tested which css values needs to be changed

/* add inside .tab { }*/
.tab{
height:auto;
}

/* can be removed seems superflous */
.Tab .t-box {
/* 
  max-height: calc(var(--tabs-height) - var(--tabs-title-padding));
  overflow: hidden;
*/
}

/* remove line-height from .tab .title()
*/ 
.Tab .title {
 white-space: pre-wrap; /* still needed */
/*
  line-height: calc(
    (var(--tabs-height) - var(--tabs-title-padding)) / var(--tabs-title-lines)
  );
*/
  -webkit-line-clamp: var(--tabs-title-lines); /* important line to clamp to max lines*/
}

in root{} change --tabs-title-lines: 2; to desired max tab lines

short comment if it's working for other multiline users and i have not forgotten any other css line to mention.

Edit: Just reworked it on an empty custom css. The following is the minimum needed css code to have nice dynamic multilines.

#root {
  --tabs-height: 36px;
  --tabs-title-lines: 3;
}

.Tab{
  height:auto;
}

.Tab .t-box{	
  min-height: calc(var(--tabs-height));

  display:flex;
  align-items:center;
}

.Tab .title {
  font-size: var(--tabs-font-size);
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--tabs-title-lines);
}

Wonderful idea, thank you! But there is one big problem.

But first I tweaked the config a bit for myself, as I wanted it to be scalable with font size and more white space.

#root {
	--tabs-min-height: calc(3 * var(--tabs-font-size));
	--tabs-max-title-lines: 10;
	--tabs-vertical-padding: 6px;
	--tabs-title-spacing: 4px;
	--tabs-font-size: 0.875rem;
}

.Tab {
	height: auto;
}

.Tab .t-box {	
	min-height: var(--tabs-min-height);
	display: flex;
	align-items: center;
	padding: var(--tabs-vertical-padding) 0px;
}

.Tab .title {
	white-space: pre-wrap;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--tabs-max-title-lines);
	line-height: calc(var(--tabs-font-size) + var(--tabs-title-spacing));
}

So the problem is that dragging tabs does not work properly. As I've tested, it calculates hitbox for dragging with --tabs-height variable. So, if height is dynamic with -webkit-line-clamp, I don't know how with only CSS we can get current title lines count for changing it.

Example: Expected behaviour: Tab is between two GitHub tabs. Result: Nothing happens, because the real hitbox is smaller.

If I set --tabs-height to 100px, for example, here is what happens: The separator is located under all tabs.

Also, the "X" close button for tabs scales with the height of the tab, so it looks very strange with only 3 lines, not saying for more.

[SunnyZebra]

Just now tried drag and drop too. Unfortunately drag and drop bug can not be changed only by css. Would need to be changed in sidebery itself.

Well at least mbnuqw now has example css styles if he wants to try out to adjust his code. Hopefully it's only a small adjustment to get the correct drag position with dynamic tab heights.

Edit: I think i found the main code point where it's calculated. calcTabsBounds in https://github.com/mbnuqw/sidebery/blob/v5/src/services/sidebar.actions.ts The other points where Sidebar.tabHeight are needs to be adjusted correspondingly. Maybe some ideas how it could be done differently.

• First step something like that. Get the element by getting the event target https://stackoverflow.com/questions/19402004/how-to-get-the-id-of-a-child-when-mouseover-parent
• second step get rect from childnode with getElementsByClassName Tab. https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect for the actual size if the child element.
• the rest could be similar to now?

Gotta learn how to build sidebery from the github to try out more 😅