Full-blown pinning

[brettz9]

When I have a lot of tabs open, the "pinned" tabs go out of view. It'd be nice if some fixed styling could be applied to ensure the pinned ones always stay in view (as in the browser)...

[ericcornelissen]

Interesting 🤔 I've never run into a situation where I had that many tabs open, good suggestion tho!

[ericcornelissen]

@brettz9, what theme (or maybe packages/config) are you using? I'm not able to replicate the issue with the theme One Dark/Light, Atom Material nor Atom Dark/Light. At least, that is for the default pinning, for the Visual Studio style pinning I can replicate the issue

[brettz9]

I'm using One Dark for both UI Theme and Syntax Theme. (I just have one other non-core theme, a syntax theme, cake-syntax). I do also have my custom stylesheet: https://gist.github.com/brettz9/40539d3feff7ee81126a

[ericcornelissen]

Alright 🤔 Just to be clear, are you using Visual Studio style pinned tabs?

[brettz9]

Nope.

[ericcornelissen]

I managed to reproduce it now (although I needed more tabs then there are files in this project 😅)

The first thing I would like to note is that One Dark itself does not even seem to have a good solution for this, tabs are just pushed outside of the window and you can only get them back by opening the file again...

---

But on topic, I'm not yet sure how this should be implemented. I guess you imagined something like the image ⬇️?

I don't think using position: absolute; for pinned tabs is going to work out in a nice way. Another possible solution could be to insert a grouping div in (or possible before) the .tab-bar and let the pinned tabs life there, but I'm not sure if that is compatible with Atom 🤔

Do you have any ideas/suggestions @brettz9 ?

[brettz9]

Yes, like that image, if the mail icon on the left is a pinned tab.

In the developer tools, I got something roughly working. I didn't get it exactly working, as I don't know how it fits in with your extension and maybe you have reasons this kind of approach wouldn't work.

For the tab-bar <ul>, I put the following style attribute:

position: fixed; left: 400px; top: 25px; z-index: 1; overflow: auto; width: 700px;

For a pinned tab, I added:

position: fixed; left: 335px; top: 25px; z-index: 1; background-color: red;

I don't know if this can practically be computed with getComputedStyles or what not, fixed is I think more of what I think is needed here... (though I could be wrong as CSS is not my forte)

[ericcornelissen]

That doesn't look very much like it is easily compatible with different setups 😅 I will see if I can get anything working though 👍

[brettz9]

Thanks... But please don't exert too much over this. Tab overflow doesn't happen that frequently for me. It will happen even less if I can use Save Workspace, but there is currently some kind of conflict with your extension which I've reported at denieler/save-workspace-atom-plugin#23 (and it also doesn't remember the pinned state).