It’s so disappointing to me that the devs don’t adequately test their design changes. This is such an obvious problem
To be fair, I don’t think it’s an issue until you mess with the css snippets in this thread. The original tabs are kind of fixed-width without these css snippets, and I’m not seeing the same jankyness in another vault without the snippets.
Anyоne found a way to swap arrangements of tabs in lower tabs rows?
neither of these work anymore. I’m not sure why. Anyone have a solution?
kk, fixed it. Just realized the rule changed so copied it like this:
/* hide inactive close button */
.workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-close-button {
display: none;
}
/* hide active close button */
.workspace .mod-root .workspace-tab-header.is-active:hover .workspace-tab-header-inner-close-button, .workspace .mod-root .workspace-tab-header.is-active .workspace-tab-header-inner-close-button {
display: none
}
/* another rule to override the app trying to make it flex */
.workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header:hover .workspace-tab-header-inner-close-button {
display: none;
}
also 3rd rule there for the app seems to override display to flex with that sometimes
Also broken: cannot seem to rearrange tabs at all. Not sure which part of the css breaks it.
1 Like
Thank you, this works as of v1.5.3.
This is so useful!
Could you make it a plugin, or at least publish in a github gist the whole css?
@MatBi here’s what I’m using right now obsidian tabs in multiple rows · GitHub
3 Likes
Just found this thread. Very nice! Thank you!
Hey @zerkshop do you have an update to your wonderful CSS for 1.8.0?
I’m still on 1.7.7
With the changes in Obsidian v1.8.0, the previous Tabs in multiple rows CSS stopped working properly.
While I’m not well-versed in CSS so I’m not entirely sure if this is the appropriate solution, after some trial and error,
I found that adding container-type: normal; to .workspace .mod-root .workspace-tab-header seems to make it work correctly.
3 Likes
Thanks, works for me!
I also brought back the close button:
.workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner-close-button {
display: flex !important;
}
1 Like
Hello, with new update of obsidian 1.8.3 my script for enable multiline row not work
.workspace .mod-root .workspace-tab-header {
flex: none !important;
width: unset;
max-width: fit-content; /* this can be used so that the max width will wrap to fit in the content */
min-width: 20px; /* set the minimum width here */
/* border: 1px solid var(--color-base-50); */
}
I write a workaround but not work fine as before. someone has find other solutions?
.is-left-sidedock-open .workspace-ribbon.side-dock-ribbon.mod-left::before,
.sidebar-toggle-button:is(.mod-right, .mod-left),
.mod-top .workspace-tab-header-container {
height: 30px;
/* background-color: blue !important; /* */
}
.workspace .mod-root .workspace-tab-header {
padding-bottom: 0px;
padding-top: 0px;
/* background-color: green; /* */
}
.mod-top .workspace-tab-header-container-inner {
margin-top: 0px;
padding-bottom: 0px;
/* background-color: yellow; /* */
}
.workspace .mod-root .workspace-tab {
flex: 0 1 auto;
min-width: 110px;
padding: 5px 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
did you read the above messages?
Multiple rows tabs CSS from this thread broken on Obsidian 1.8.7 upgrade.
Wrote simple CSS code snippets/many-tabs.css | d9k-obsidian-style-guide
.mod-root .workspace-tab-header-container {
height: unset;
min-height: 64px;
--tab-font-size: 15px;
padding-right: 52px;
}
.mod-root .workspace-tab-header-container-inner {
flex-wrap: wrap;
}
.mod-root .workspace-tabs .workspace-tab-header {
width: max-content;
flex-basis: max-content;
container-type: initial;
max-width: 100%;
flex-shrink: 0;
padding-top: 4px;
padding-bottom: 4px;
}
.mod-root .workspace-tabs .workspace-tab-header-inner {
/* for close button if position:absolute */
padding-right: 16px;
}
.is-hidden-frameless:not(.is-fullscreen):not(.mod-macos) .workspace-tabs.mod-top-right-space .workspace-tab-header-container:after {
height: 40px;
}
.mod-root .workspace-tab-header-spacer {
display: none;
}
.mod-root .workspace-tab-header-new-tab {
position: absolute;
right: 16px;
top: 30px;
}
.mod-root .workspace-tab-header-tab-list {
position: absolute;
right: 0;
top: 30px;
}
.mod-root .sidebar-toggle-button {
position: absolute;
right: 60px;
top: 30px;
}
.mod-root .workspace-tab-header .workspace-tab-header-inner-close-button {
height: 100%;
position: absolute !important;
}
I’m too lazy to fix drag-n-drop. I use hotkeys from Pane Relief extension instead: Swap tab with next/previous in group. Bound it to Ctrl + Shift + Down/Up.
2 Likes
I have been trying every type of change to get the previous look back and this is what did it.
I have made some edits to make things how I like the based on a lot of the previous work people have done in this forum. If anyone is interested in what I have used for the following:
.workspace .mod-root .workspace-tab-header-container {
display: table;
}
/* Make it work on multiple lines */
.workspace .mod-root .workspace-tab-header-container-inner {
flex-wrap: wrap;
padding: unset;
}
/* Make it work on multiple lines */
.workspace .mod-root .workspace-tab-header {
container-type: normal;
}
/* Sort an appearance issue */
.titlebar .workspace-tab-header-new-tab,
.mod-root .workspace-tab-header-new-tab {
display: table-cell;
}
.titlebar .workspace-tab-header-tab-list,
.mod-root .workspace-tab-header-tab-list {
display: none;
}
.workspace .mod-root .workspace-tab-header {
flex: none !important;
width: unset; /* Unset the width
/* max-width: fit-content;
/* this can be used so that the max width will wrap to fit in the content */
/* min-width: 100px; */
/* set the minimum width here */
max-width: 500px;
/* set the maximum width here */
/* set the minimum tab height */
min-height: 26px;
}
/* Highlight to the active tab */
.workspace-tab-header.is-active {
background-color: rgba(255, 255, 255, .1) !important;
}
/* Remove the icon from main workspace tabs (not the sidebar) */
.workspace .mod-root .workspace-tab-header .workspace-tab-header-inner-icon {
display: none !important;
}
/* Override the "white-space: nowrap" property for all instances of .workspace-tab-header-inner-title */
div.workspace-tab-header .workspace-tab-header-inner-title,
div.pinned-items-container .workspace-tab-header-inner-title,
div.vault-tabs-container .workspace-tab-header-inner-title {
white-space: initial !important;
}
/* Choices */
/* Limit the line width? */
.workspace .mod-root .workspace-tab-header {
width: unset;
max-width: var(--tab-width);
border: 1px solid var(--color-base-50);
/* max-width: fit-content; /* this can be used so that the max width will wrap to fit in the content */
}
/* hide active close button */
.workspace .mod-root .workspace-tab-header.is-active:hover .workspace-tab-header-inner-close-button, .workspace .mod-root .workspace-tab-header.is-active .workspace-tab-header-inner-close-button {
display: none;
}
.workspace .mod-root .workspace-tab-header {
/* max-width: fit-content;
/* this can be used so that the max width will wrap to fit in the content */
/* min-width: 200px; */
/* set the minimum width here */
/* max-width: 200px; */
/* set the maximum width here */
/* set the minimum tab height */
}
1 Like
And my variant, working after all.
/* === МНОГОЭТАЖНЫЕ ВКЛАДКИ - БЕЗ РАСТЯГИВАНИЯ === */
/* Применяем только к основной рабочей области, исключая боковые панели */
.workspace-split.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container-inner {
flex-wrap: wrap !important;
row-gap: 2px !important;
column-gap: 2px !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
padding-right: 0 !important;
width: calc(100% + 20px) !important;
margin-right: -20px !important;
}
.workspace-split.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container {
height: auto !important;
max-height: none !important;
overflow-x: hidden !important;
padding-right: 0 !important;
}
/* ОТКЛЮЧАЕМ растягивание вкладок */
.workspace-split.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
flex-grow: 0 !important;
flex-shrink: 1 !important;
max-width: 350px !important;
}
/* Блокируем изменение размера при hover */
.workspace-split.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header:hover {
max-width: 350px !important;
flex-grow: 0 !important;
}
/* Блокируем расширение текста при hover */
.workspace-split.mod-root .workspace-tab-header:hover .workspace-tab-header-inner-title {
text-overflow: ellipsis !important;
overflow: hidden !important;
}
/* КНОПКА ЗАКРЫТИЯ ПОВЕРХ ТЕКСТА - УМЕНЬШЕННАЯ */
.workspace-split.mod-root .workspace-tab-header .workspace-tab-header-inner-close-button {
position: absolute !important;
right: 4px !important;
top: 50% !important;
transform: translateY(-50%) !important;
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
background: inherit !important;
border: 1px solid rgba(0, 0, 0, 0.5) !important;
border-radius: 6px !important;
z-index: 10 !important;
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;
padding: 0 !important;
margin: 0 !important;
align-items: center !important;
justify-content: center !important;
}
/* ОРАНЖЕВАЯ КНОПКА НА АКТИВНОЙ ВКЛАДКЕ /
.workspace-split.mod-root .workspace-tab-header.is-active .workspace-tab-header-inner-close-button {
background: #ff6600 !important; / Ярко-оранжевый фон */
border: 1px solid #ff6600 !important;
}
.workspace-split.mod-root .workspace-tab-header.is-active .workspace-tab-header-inner-close-button svg {
opacity: 1 !important; /* Полностью видимый крестик /
color: white !important; / Белый крестик */
}
/* Крестик на обычных вкладках */
.workspace-split.mod-root .workspace-tab-header .workspace-tab-header-inner-close-button svg {
opacity: 0.6 !important;
color: var(–text-normal) !important;
}
/* При наведении на кнопку */
.workspace-split.mod-root .workspace-tab-header .workspace-tab-header-inner-close-button:hover {
background: var(–background-modifier-hover) !important;
border: 1px solid var(–text-normal) !important;
border-radius: 6px !important;
}
.workspace-split.mod-root .workspace-tab-header .workspace-tab-header-inner-close-button:hover svg {
opacity: 1 !important;
color: var(–text-normal) !important;
}
/* Градиентная маска для текста - плавное затухание под кнопкой */
.workspace-split.mod-root .workspace-tab-header-inner-title {
-webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%) !important;
mask-image: linear-gradient(to right, black 85%, transparent 100%) !important;
}
/* Скрываем разделитель */
.workspace-split.mod-root .workspace-tab-header-spacer {
display: none !important;
}
/* Убираем отступ у кнопок */
.workspace-split.mod-root .workspace-tab-header-new-tab,
.workspace-split.mod-root .workspace-tab-header-tab-list {
margin-right: 0 !important;
}
/* Отключаем анимации при hover */
.workspace-split.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header,
.workspace-split.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header * {
transition: none !important;
}