The sidebar title should flow the same as normal titles. I'm glad you added an ellipsis here, but the title still seems to be limited to half of the width of the containing component

Ah, so this seems to be a bug of some sort that isn't related to the CSS. The ellipsis is a result of the text-overflow: ellipsis property, which was already set. However, the ellipsis wasn't shown before because the ChatThreadListItemMenu was positioned above the SidebarItem (which includes the title of the sidebar), hiding the ellipsis. Therefore, the ellipsis wasn't added, it just showed up as a result of positioning the ChatThreadListItemMenu absolutely.

As for why the text is still "overflowing" with the ellipsis, I noticed that all sidebar titles are truncated to be exactly 30 characters long (including the 3 characters for the ellipsis). I did some investigating and found that this is because for some reason, the threadInfo.uiName that is getting passed into SidebarItem is already truncated/trimmed:

Note that when I hardcode the sidebar title to be a long string, it shows up fine:

This means the CSS is not interfering with the overflow -- the ellipsis is literally a part of the string. If, however, we remove the change made in this diff (position: absolute, etc.), it looks like:

This is a result of the non-absolutely positioned ChatThreadListItemMenu:

Is position: absolute strictly necessary here? This problem doesn't strike me as one that should necessitate absolute positioning, so I'd like to see if we can solve the problem otherwise

Thus, you're right, there may be a better solution than position: absolute. I can see if I can find one by tinkering around with it, however, the bigger issue is the 30-character trimming of sidebar titles (continued below).

In thread-utils, this is the only function that tinkers with the uiName:

In thread-utils, there's another function createPendingSidebars:

This function actually does trim the text, and to 30 characters! So this must be the function that is doing the trimming. threadName gets passed through a createPendingSidebar until it ends up back in the threadUIName function:

But even if I change threadName to something like "blah blah," the console.log(threadInfo.name) still prints the actual thread names:

Whereas if I change the thread uiName to something else, it does show up:

Overall puzzled on why this is happening. I thought I zeroed in on the source of the trimming (the call to trimText(messageTitle, 30)), but when I fiddled with it it didn't change the way I thought it would. Not sure when this regression was introduced, but any guidance would be great.

In summary, the CSS doesn't seem to be the reason why the sidebar titles are cut off. I understand that the position: absolute may not be the best solution, so once I figure out why the sidebar titles are being trimmed (and how), I will work on a better CSS solution. But first, I'd like to know why the titles are being trimmed to 30 characters in the first place. Is this a native rule that made it to web? Or is there some other reason?

But first, I'd like to know why the titles are being trimmed to 30 characters in the first place.

I think you figured it out on Linear – when we generate the title of a sidebar, we trim it. It looks like we should increase this number a bit. As for this stuff, would still love a solution that avoids position: absolute

{F86019}