The Middle Panel Became a Box on Wide Screens With Two Utilities

On a wide screen, my AI workspace opens in three columns: sidebar on the left, context panel on the right, output in the middle. The two side columns were already plain boxes, no borders, no rounded corners. The middle panel? It still looked like a card. Fourteen-pixel rounded corners, a thin border around it, semi-transparent background. The only part of the screen that still looked like a bolted-on widget.

The fix was one line in AiChatWorkspace.tsx. The commit message said the panel became "no border", and my first guess was wrong: I assumed the card classes were removed entirely, so the panel would be a box at every screen size.

It wasn't.

The diff just appended xl:rounded-none xl:border-0 at the end of the class declaration. The original card classes were untouched. Luckily the diff was that small, so the wrong guess surfaced fast.

// before
className="rounded-[14px] border border-border bg-card/40"

// after
className="rounded-[14px] border border-border bg-card/40 xl:rounded-none xl:border-0"

This was also the third tweak in my recent UI cleanup cycle: the first was about border color and when it appears, the second about its role as a frame or divider. This one was about when the border gets to go away.

The base classes stay, they just get buried at xl

The key is how Tailwind's mobile-first approach works: a utility without a prefix applies at every screen size, a prefixed utility like xl: only kicks in at that breakpoint and above [7]. The compiled result goes like this: the base classes still render everywhere, then one min-width media query overrides the radius and border width, but only on large screens. On mobile, the panel is still a card. The same utilities never need to be written twice, once as the default, once as the exception.

About "no border" in the commit message, the precise version is this: border-0 sets the border-width to zero [5]. Tailwind's border utility family separates width and color, so zeroing the width doesn't touch the color already defined in the original classes. Without a width, the border just doesn't draw. Not discarded, just thinned down to zero.

That's a hair's difference in writing, but a difference in principle. The component still keeps its full card identity, with an override stacked at one breakpoint. Compared to deleting the card classes outright, the override version is far easier to reverse: drop the two utilities at the end, done.

Two utilities, one identity change

What makes me like this pattern more and more: card styling can legitimately be the default for small screens, with the large breakpoint releasing it. On a narrow screen, the output panel needs a card shape to have its own space. Once the screen is wide enough, the three-column grid is the frame, and a border inside it is just noise. The commit note said size and spacing were untouched, which makes sense, because the diff has zero spacing utilities.

I'm personally more convinced this is the easier pattern to maintain than pulling the card out of the base classes and reassembling it at every breakpoint. One job in one place, the decision is clearly visible. Easy proof: open it again in a narrow tab, the card is intact without me writing a single class specifically for mobile.

The result: at xl, the three columns now speak one language: sidebar, context, output, all plain boxes. No more panel that looks treated differently.

One other thing I took away: a commit message that's too terse can mislead, including future me. "No border" made me guess the panel was bare at every size. Going forward I'm trying to make a habit of writing more specifically, for example "border-width goes to zero at xl, mobile view stays a card". The extra seconds typing are far cheaper than five minutes of misunderstanding.

Sources

• Source 5 [5]
• Source 7 [7]