Tab Bar overlapping tabs/workspaces with the close, minimize, and maximize buttons on MacOS

[Chistophee]

After setting up vivalArc, the tab bar looks great but the tabs would appear overlapping with the "traffic light" buttons and even with the workspaces when I enable it. Here's a screenshot of an example with workspaces on the tab bar:

[tundruh]

After setting up vivalArc, the tab bar looks great but the tabs would appear overlapping with the "traffic light" buttons and even with the workspaces when I enable it. Here's a screenshot of an example with workspaces on the tab bar:

@Chistophee Just had this as well. Make sure in Settings > Window Appearance > User Interface Density you have Regular checked instead of Compact.

If it's still too close for comfort (mine still was):

1. Open the vivalarc.css file within the VivalArc-main folder you extracted with your preferred text editor (ex. Notepad/NP++ on Windows, Text Editor on macOS, gedit or preferred equivalent for Linux)
2. Replace the following with what I have under root at the top:

:root{
--window-border:10px; /* window border, recommend 4px~16px, 12 = default */
--mac-header:calc(var(--window-border) + 16px); /* title bar extra height, 0 = default */
--win-header:calc(var(--window-border) + 16px); /* title bar extra height, 0 = default */
--linux-header:calc(var(--window-border) + 16px); /* title bar extra height, 0 = default */

3. Save and close, and restart Vivaldi.

That should apply the same setting across the board, and I went ahead and just sent it for all 3 OSes in case someone else has the same issue.

That's what I just applied and it seems to give enough room at the top now, regardless of enabled side bar/panel or address bar. First line changes border for entire window, other lines add additional padding/space for title bar (where your maximize, minimize and close buttons are). Feel free to change those values further according to preference.

Hope that helps. 👍🏽