Tab elements shift my window control buttons.. | electronjs.org | Page 1

Here is how I implemented a similar feature:

<nav className="draggable flex justify-between select-none text-muted-foreground h-10 max-w-screen overflow-x-hidden">
  <div className={cn("flex items-center overflow-hidden", isMacOS ? "ml-18" : "ml-1")}>
    <div className="flex overflow-hidden">
      <Link to="/">
        <Button className="cursor-pointer nonDraggable" variant="ghost" size="icon">
          <Home />
        </Button>
      </Link>
      <div className="overflow-hidden my-1 ml-2">
      <TerminalTabs // this has "flex space-x-2 h-full overflow-auto scrollbar-hidden"
          tabs={tabs} 
          onTabSelect={handleTabSelect} onTabClose={handleTabClose} 
          activeTab={terminalId} onNewTabClick={handleNewTabClick}/>
      </div>
    </div>
    <Button variant="ghost" size="icon" 
        className="cursor-pointer nonDraggable size-7 rounded-e-none ml-1 border-r-1" 
        onClick={handleNewTabClick}>
      <Plus />
    </Button>
    <QuickShellSelectNewTabButton />
  </div>
  {!isMacOS && <WindowControlBar />} // WindowControlBar has a shrink-0 property
</nav>

I didn't read your code in detail, but a few key points to take away:

apply max width
shrink-0 for the window controls so they do not shrink as the tabs start overflowing
Make sure to use overflow hidden/scroll in the correct container(s)

#Tab elements shift my window control buttons..