I Thought It Was Alignment, But It Was Layout

Some bugs teach you CSS.
Some bugs teach you how to think.

This one did both.

I worked on Bug 2019561, reviewed as Phabricator D289506, and on the surface it looked like a simple misalignment issue in Split View tabs.

But as I dug deeper, I realized the tabs were not really “misaligned.”
The real problem was that the container itself was behaving differently across layout states.

How it looked from the user side

In some vertical tab states, Split View tabs looked off-center.
Hover behavior also felt inconsistent depending on width and orientation.

It was one of those UI problems where users feel that something is wrong immediately, even before they can explain it.

What changed in my thinking

At first, I was looking at the tab items.

Then I shifted focus to the parent wrapper and asked:

Are these spacing rules being applied in the correct layout state?

That question changed everything.

The issue was mainly about:

• container width behavior
• orientation-specific assumptions
• rules meant for two-column layouts leaking into stacked layouts

Working through the fix

The main changes lived in:

• browser/themes/shared/tabbrowser/tabs.css

The direction was to make layout intent explicit:

• keep the Split View grid predictable (1fr 1fr)
• scope spacing rules to the right orientation/state
• avoid applying horizontal assumptions to stacked vertical layouts

Container-aware conditions around the 211px threshold played a big role here.
If a state was not truly two-column, it should not inherit two-column spacing behavior.

What review taught me

The review feedback made this patch much cleaner.

I had to tighten scope, simplify comments, and remove changes that looked fine in one mode but created drift in another.

That process reinforced a lesson I keep seeing in Firefox:

Good fixes are not just correct they are precise.

Biggest takeaway

This patch reminded me that visual bugs are rarely just visual.

Sometimes what looks like a tiny alignment issue is really a layout contract issue across multiple states:

• horizontal vs vertical
• expanded vs collapsed
• two-column vs stacked

When those contracts are explicit, the UI feels stable. When they are implicit, tiny inconsistencies appear everywhere.

Closing

D289506 started as “tabs look off.”

It ended up being a deep lesson in responsive layout logic, code review discipline, and writing CSS that behaves correctly outside the one state you are currently testing.

Open source keeps teaching me this: details matter, and precision matters even more.