From 0e16a7fe55a971f2ec69b9289d97f12e3293e5fd Mon Sep 17 00:00:00 2001
From: Nan Gao <88081804+ggnnggez@users.noreply.github.com>
Date: Thu, 16 Apr 2026 02:55:16 +0200
Subject: [PATCH] fix(frontend): make Suggestion button opaque in dark mode
 (#2276)

* fix(frontend): make Suggestion button opaque in dark mode

The outline Button variant applies dark:bg-input/30, leaving Suggestion
pills ~70% transparent in dark mode. Scrolled chat content bled through
the buttons, making suggestion text unreadable. Override with
dark:bg-background so it matches the opaque light-mode appearance.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix the lint error of commit

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
---
 frontend/src/components/ai-elements/suggestion.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ai-elements/suggestion.tsx b/frontend/src/components/ai-elements/suggestion.tsx
index dcc82ae1b..77511f9ef 100644
--- a/frontend/src/components/ai-elements/suggestion.tsx
+++ b/frontend/src/components/ai-elements/suggestion.tsx
@@ -64,7 +64,7 @@ export const Suggestion = ({
   return (
     <Button
       className={cn(
-        "text-muted-foreground h-auto max-w-full cursor-pointer rounded-full px-4 py-2 text-center text-xs font-normal whitespace-normal",
+        "text-muted-foreground dark:bg-background h-auto max-w-full cursor-pointer rounded-full px-4 py-2 text-center text-xs font-normal whitespace-normal",
         className,
       )}
       onClick={handleClick}