Tabs in multiple rows

Share & showcase
1

before - smooshed tabs:

image
image914×188 6.54 KB

after - grows into multiple rows:

image
image914×188 7.51 KB

css:

.workspace .mod-root .workspace-tab-header-container {
  display: table;
}

.workspace .mod-root .workspace-tab-header-container-inner {
  flex-wrap: wrap;
}

.workspace .mod-root .workspace-tab-header {
    flex: none !important;
}

.titlebar .workspace-tab-header-tab-list,
.titlebar .workspace-tab-header-new-tab,
.mod-root .workspace-tab-header-tab-list,
.mod-root .workspace-tab-header-new-tab {
    display: table-cell;
}

The height of the tab container auto-adjusts if the tabs spill into multiple rows.

Maybe it could be improved by some level of flex in the tab-header to take up a certain amount of space until it spills over to the next row.

hmmm or auto-adjust to the size of the title of the tab would be nice

5 Likes
2

Great, thanks!

3

edited original post to add .workspace .mod-root to the first two rules. It fixes some issues with tabs in new windows, and makes the selector more specific to not change other “tabs” in the application

4

and here’s another mod to make the tabs more compact

.workspace .mod-root .workspace-tab-header {
    width: unset;
    max-width: var(--tab-width);
}

.workspace-tab-header-inner {
    width: unset;
}

Before:
image

After:
image

I set max-width to --tab-width instead of --tab-max-width since it looks better to me

2 Likes
5

styling a bit more

  • removing tab list button (I don’t use it)
  • adding a border around the tabs and tweaking other bits that affect it’s appearance
  • getting rid of some padding to make the tabs more compact

image

.workspace .mod-root .workspace-tab-header-container {
  display: table;
  height: unset;
}

.workspace .mod-root .workspace-tab-header-container-inner {
  flex-wrap: wrap;
  margin: unset;
  padding: unset;
}

.workspace .mod-root .workspace-tab-header {
  flex: none !important;
}

.titlebar .workspace-tab-header-new-tab,
.mod-root .workspace-tab-header-new-tab {
  display: table-cell;
  padding: unset;
}

.titlebar .workspace-tab-header-tab-list,
.mod-root .workspace-tab-header-tab-list
{
  display: none;
}

.workspace .mod-root .workspace-tab-header {
    width: unset;
    max-width: var(--tab-width);
    border: 1px solid var(--color-base-50);
}

.workspace .mod-root .workspace-tab-header-inner::after {
    width: 0px;
}

body {
    --tab-outline-color: unset;
}
2 Likes
6

Great improvements. Thanks

7

The thing it can’t seem to do right now, is move tabs from row 1 to another row. Like when you click and hold and drag a tab.

8

Very nice Improvement!
THANKS

1 Like
9

yeah it’s been a bit of a game changer for me. I now only need 2 windows open

  • 1 for the main window, with max ~3 panes
  • 1 pop-out window for canvases so they can take up the full screen width

fore example, right now I have

  • 14 tabs in first pane (4 rows)
  • 9 tabs in 2nd pane (2 rows)
  • 13 tabs in 3rd pane (5 rows)

I love how the rows are compact and can be different heights per pane

image
image2549×237 20.3 KB

It seems like it would be nice to be able to re-arrange the tabs properly (it’s a bit finicky, I think you can either drag a tab anywhere in the first row, sometimes to the end of the Nth row, and always to the end of the last row), but I haven’t found myself needing it. And the constraint creates a bit of a workflow:

  • click “+” to focus the desired pane and open a new tab at the end, then open or create a new note, etc.
  • older tabs = top left, newer tabs = bottom right
  • kill off old tabs as you go from from the top to the bottom
10

Aaaaaaaaah my eyes are bleeding! :wink: