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

9

Hey, based on the previous @eduardohilariodev and @nicosomb snippets and plugins, I tried to improve them even more and allow for a fully customizable plugin for pinned tabs. Currently beta testing and trying to get it accepted for the community plugins, if anyone wants to test it and give feedback.

Pinned Tabs Customizer

1 Like