Skip to content

fix: match MultimodalInput background to artifact panel#1442

Open
khoinguyenpham04 wants to merge 1 commit intovercel:mainfrom
khoinguyenpham04:fix/artifact-input-background
Open

fix: match MultimodalInput background to artifact panel#1442
khoinguyenpham04 wants to merge 1 commit intovercel:mainfrom
khoinguyenpham04:fix/artifact-input-background

Conversation

@khoinguyenpham04
Copy link

Summary

  • Fixes a visual bug where the MultimodalInput wrapper in the artifact panel shows a sharp-cornered
    rectangle behind the rounded input form in both light and dark mode

Problem

The artifact panel (motion.div, line 303) uses bg-muted dark:bg-background, but the
MultimodalInput wrapper (line 340) uses the inverse: bg-background dark:bg-muted.

Since the wrapper div has no border-radius, it's visible as a sharp rectangle behind the form's
rounded-xl corners:

  • Light mode: white rectangle against the muted gray panel
  • Dark mode: lighter gray rectangle against the dark panel

Screenshots

Before (bug)

After (fix)

Fix

Align the MultimodalInput className to match the parent panel's background:

- className="bg-background dark:bg-muted"
+ className="bg-muted dark:bg-background"

Test plan

- Open an artifact (e.g. code generation) so the side panel appears
- Verify no sharp-cornered rectangle around the chat input in light mode
- Switch to dark mode and verify the same

Removed the `alt` and `height` attributes — sometimes those cause rendering issues on GitHub. Just
`src` and `width` is the most reliable.

The MultimodalInput wrapper in the artifact panel uses
bg-background dark:bg-muted, which is the inverse of the parent
panel's bg-muted dark:bg-background. Since the wrapper div has no
border-radius, it shows as a sharp-cornered rectangle behind the
form's rounded-xl corners in both light and dark mode.
@vercel
Copy link
Contributor

vercel bot commented Mar 2, 2026

@khoinguyenpham04 is attempting to deploy a commit to the Zeb Hermann's projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant