I know, I know, this sounds controversial. But hear me out.
A few years ago a new trend in UI design emerged where related elements would appear more and more detached and unrelated to the things they are meant to point to.
Here's a screenshot of Google Chrome circa 2010:
Remember those tabs? (I love them.) They convey the separation and connection extremely clearly. The first tab is open, and it is literally the one with its content window. The other two tabs are clearly separate.
Here's Firefox v.41 circa 2015:
A decade later, Firefox v.148. The tabs are floating separately from the content window like unrelated elements. Their rounded corners add to the feeling of separation. They look like buttons.
A few days ago Firefox announced a new redesign (Firefox Nova), and the separation of related elements is now extreme.
As time goes on, more and more elements just float away into their own isolated bubbles. This looks like three separate windows neatly put together. The tab is separate from its own address bar, and the content window is separate from everything. Margins with shadows double-down on the feeling of separation. Why? What is this trying to convey? Why did we lose some space for content to create a false separation of related UI elements?
For the tab bar, it would make sense if the currently active tab were connected to its content window, while inactive tabs remain floating bubbles, like so:
It seems like we're going through a long era of floating-bubbles-driven UI design. Let's just wait it out.
The bad thing about UI trends is that they come and go.
The good thing about UI trends is that they come and go.