Tabs are small

[Hasan-01]

The height of the tabs is a bit shorter, making it difficult to click.

This can be easily solved by this CSS code:

.tab-strip > span > .tab-position {
    position: relative;
    height: 40px !important;
    width: auto !important;
    left: 50%; /* Position from the left edge */
    transform: translateX(-50%); /* Shift the element back by 50% of its own width */
}

.tab-strip > span > .tab-position > .tab:not(.pinned){
    width: 85px !important;
}

.tab-strip > span > .tab-position > .tab.pinned{
    width: 30px !important;
}

it will look like this,

[tovifun]

Thanks for sharing the CSS! I'll make sure to fix the tab bar being too tiny in the following updates. Appreciate your input! 🚀

[Hasan-01]

Hey Tovi, thanks a ton for this awesome project! I've been searching for something like this for a long time. I'm loving the Arc browser vibes, and I appreciate you taking your time to maintain it ♥️

[kryst4line]

Hi! I tweaked @Hasan-01's css and made it look a bit more similar to Arc (on Windows). There are still a few bugs regarding tab dragging, but this is the idea. No doubt it can be done better, but this is the idea.

#tabs-tabbar-container > .separator {
    display: none !important;
}

html {
    --tab-size-multiplier: 1.5
}

#tabs-tabbar-container .tab-strip .tab-position {
    height: calc(var(--Height) * var(--tab-size-multiplier));
    transform: translateX(var(--PositionX)) translateY(calc(var(--PositionY) * var(--tab-size-multiplier)));
    align-items: center;
}

#tabs-tabbar-container .tab-strip .tab-position .tab {
    height: calc(var(--Height) * (var(--tab-size-multiplier) - 0.2));
    max-height: calc(var(--Height) * (var(--tab-size-multiplier) - 0.2));
    justify-content: center;
    font-size: 14px;
    padding: 0.5em 0;
}

#tabs-tabbar-container .tab-strip .tab-position .tab .title {
    padding-left: 8px;
}

#tabs-tabbar-container .tab-strip .tab-position .tab .svg-tab-stack {
    height: calc(var(--Height) * (var(--tab-size-multiplier) - 0.2));
}

#tabs-tabbar-container .tab-strip .tab-position .tab .tab-header {
    flex: 0 0 calc(30px * (var(--tab-size-multiplier) - 0.2));
}

#tabs-tabbar-container .tab-strip .tab-position .tab .tab-header progress {
    bottom: 0px;
    left: 3px;
    --progress-width: calc(var(--Width) - 10px);
}

#tabs-tabbar-container .tab-strip .separator {
    height: calc(var(--Height) * var(--tab-size-multiplier));
    transform: translateX(var(--PositionX)) translateY(calc(var(--PositionY) * var(--tab-size-multiplier)));
    align-items: center;
}

#tabs-tabbar-container .tab-strip .button-toolbar.newtab {
    top: calc(var(--PositionY) * var(--tab-size-multiplier)) !important;
    height: calc(var(--Height) * var(--tab-size-multiplier));
}

[kryst4line]

Updated my code above and made it cleaner. The only bug I found is tab dragging will move the tab more than the mouse input, still have to find how to fix that.