The Context Panel Stopped Being a Card: Border Became a Divider

I open my AI chat workspace, and my eyes go straight to the right. The context panel there looks like a floating card: rounded corners, a border on all four sides, plus some distance from the viewport edge. Meanwhile the sidebar on the left is already full height, flush against the screen edge. Two elements on one screen, two design languages. The left one says "I'm part of the house"; the right one says "I'm a card squatting on top of it".

The change was a single line of classes in AiChatWorkspace.tsx. But that line changed the border's job, it didn't just delete it. And this is what made me misread my own task for a while.

My first guess: just remove the border

When I got this task, my guess was simple: strip the card's border, done. Swap border for border-0, close the laptop. In reality the border wasn't removed at all. It changed jobs.

Before, the right panel section at the xl breakpoint had xl:my-4 xl:mr-4 rounded-[14px] border border-border bg-card/40. After, it became this:

// before
xl:my-4 xl:mr-4 rounded-[14px] border border-border bg-card/40

// after
rounded-none border-0 border-l border-border bg-card/40

There are two design decisions riding along in that one line, and both escaped my first guess.

rounded-none doesn't mean "remove the rounded classes and call it a day". That class explicitly sets the radius to zero, as documented by Tailwind [4]. It's a small detail, but it matters because the old value used the arbitrary value rounded-[14px]. The old radius had to be overridden, not just abandoned.

Then border-0 border-l: all sides get zeroed out first, then the left side gets a 1 pixel width [5]. The panel still has a border. Just one side of it.

Frames and dividers are different jobs

Only after seeing the result on screen did I find the right term. This diff isn't "removing the card frame", it's changing the border's role: from frame to divider.

A frame's job is to mark "this is a separate object from the surface behind it". That's why classic cards have a four-sided border plus rounded corners. A divider's job is different: marking the boundary between two adjacent areas. Material Design 3 calls this element a divider, a thin line that groups content in lists or containers, with full guidelines for full width and inset variants [6]. Inset dividers get spacing from the edges, full width dividers don't. A panel flush with the viewport clearly belongs to the second camp.

The right context panel now sits flush against the screen edge, separated from the chat area by nothing but one thin vertical line. That's a panel pattern, not a card. And a panel doesn't need a four-sided frame. A frame on an element that touches the screen edge actually looks wrong: the side touching the edge "breaks" for no clear reason, and the rest becomes half a frame searching for meaning.

One more honest line

I found no notes in the commit about the exact aesthetic reasoning, so this part is a design decision I accept and defend after the fact, not recorded history. But the logic is easy to follow. Floating cards are for elements that genuinely hover above content: dialogs, popovers, cards in a dashboard. A chat workspace isn't that family. Its layout is a shell: left sidebar, center chat area, right context panel. Shell elements read most honestly as planes separated by lines.

My opinion now is firm: if an element sits flush against the viewport edge, don't give it a four-sided frame. One line on the side holding it to the rest of the layout is enough, the rest is unnecessary ripple.

The panel itself is still scrollable like before, that was already there and this diff didn't touch it. The one thing I took away: when turning a card into a panel, the question isn't "how do I remove the border", it's "what is this border's job now".

Sources

• Source 4 [4]
• Source 5 [5]
• Source 6 [6]