Shrink the size of pinned tabs

Feature requests
1

Use case or problem

Pinned notes take up valuable space which can be used to show the titles of other non pinned tabs.

Proposed solution

The horizontal size of a pinned tab should be smaller than a normal tab. This behavior should mimic that of Chrome or Firefox where a pinned tab’s size is only big enough for the first couple letters of the name.

Current workaround (optional)

All pinned notes are opened in their own window which i manually shrink. If i need to reference those notes I expand the panel.

8 Likes
2

You can always make a permanent CSS snippet if this won’t get implemented, as follows :grin:

.workspace-tab-header:has(.mod-pinned) {
  /* shrink if pinned */
  max-width: 60px !important;

  /* also hide the title of pinned tabs */
  & .workspace-tab-header-inner-title {
    display: none;
  }
}

Result (far better than using extra windows, right?):

Screenshot-25_11_2023-22.48.26

…there is still a tooltip shown if you hover the shrunk tab, and unpinning reverts the tab as expected :kissing_smiling_eyes: :ok_hand:

Heck, I’m keeping this in my vault - can’t believe I haven’t thought about it before.

8 Likes
3

Thats a great idea. Thanks for the snippet.

1 Like
4

+1
this would be really nice

5

How do you get the file icon in tabs?

6

Here you go:

1 Like
7

Hello there!

Here is my first plugin, inspired by the @woofy31 snippet above.
I added a setting to show or hide the tab title.

You can checkout it (or see screenshots) here: GitHub - nicosomb/obsidian-shrink-pinned-tabs: Obsidian plugin to shrink pinned tabs in order to save screen space

I have still some work to do on it (I found a bug) but it works at 90% :sweat_smile:

I will publish it soon.

Have a nice day.

2 Likes
8

I’ve improved upon your snippet to work better with prefix emojis and to resemble Chromium pinned tabs:

.workspace-tab-header:has(.mod-pinned) {
  /* shrink if pinned, to the size of an emoji */
  max-width: 36px !important;

  & .workspace-tab-header-inner-title {
    /* hide the title of pinned tabs (optional) */
    /* display: none; !important*/

    /* hide ellipsis character */
    text-overflow: clip !important;
  }
  /* hide pin icon */
  & .workspace-tab-header-status-container {
    display: none !important;
  }
}

Result:

image