From cb9af89318f3fe205d690347ab6212ff4b1de619 Mon Sep 17 00:00:00 2001
From: API Test Bot <phanquochoipt@gmail.com>
Date: Wed, 4 Feb 2026 09:17:07 +0700
Subject: [PATCH] fix(extension): resolve UI layout issues in sidepanel

- Add sidepanel folder to Tailwind content paths (root cause of broken CSS)
- Fix ChatInterface layout: group ChatInput and QuickCapture properly
- Remove sticky positioning from QuickCapture (now in flex container)
- Make TokenInfoCard buttons more compact for narrow screens
- Improve TokenAnalysisWidget button layout with flex-wrap
---
 .../sidepanel/chat/ChatInterface.tsx          | 32 +++++++++----------
 .../sidepanel/chat/QuickCapture.tsx           |  4 +--
 .../sidepanel/dexscreener/TokenInfoCard.tsx   | 28 ++++++++--------
 .../sidepanel/widgets/TokenAnalysisWidget.tsx | 12 +++----
 .../tailwind.config.js                        |  8 ++++-
 5 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/surfsense_browser_extension/sidepanel/chat/ChatInterface.tsx b/surfsense_browser_extension/sidepanel/chat/ChatInterface.tsx
index 4c661fd08..6f8615983 100644
--- a/surfsense_browser_extension/sidepanel/chat/ChatInterface.tsx
+++ b/surfsense_browser_extension/sidepanel/chat/ChatInterface.tsx
@@ -511,24 +511,27 @@ What would you like to know?`;
                 )}
             </div>
 
-            {/* Chat input (only in chat mode) */}
+            {/* Chat input and quick capture (only in chat mode) */}
             {viewMode === "chat" && (
-                <ChatInput
-                    onSend={handleSendMessage}
-                    disabled={isStreaming}
-                    placeholder={
-                        context?.pageType === "dexscreener"
-                            ? `Ask about ${context.tokenData?.tokenSymbol || "this token"}...`
-                            : "Ask me anything..."
-                    }
-                    suggestions={messages.length === 0 ? [] : quickSuggestions}
-                    onSuggestionClick={handleSuggestionClick}
-                />
+                <div className="flex-shrink-0">
+                    <ChatInput
+                        onSend={handleSendMessage}
+                        disabled={isStreaming}
+                        placeholder={
+                            context?.pageType === "dexscreener"
+                                ? `Ask about ${context.tokenData?.tokenSymbol || "this token"}...`
+                                : "Ask me anything..."
+                        }
+                        suggestions={messages.length === 0 ? [] : quickSuggestions}
+                        onSuggestionClick={handleSuggestionClick}
+                    />
+                    <QuickCapture />
+                </div>
             )}
 
             {/* Back to chat button for other views */}
             {viewMode !== "chat" && (
-                <div className="border-t p-3">
+                <div className="flex-shrink-0 border-t p-3">
                     <button
                         className="w-full py-2 text-sm text-center text-primary hover:bg-primary/5 rounded-md transition-colors"
                         onClick={() => setViewMode("chat")}
@@ -538,9 +541,6 @@ What would you like to know?`;
                 </div>
             )}
 
-            {/* Quick capture button */}
-            <QuickCapture />
-
             {/* Alert configuration modal */}
             <AlertConfigModal
                 open={showAlertModal}
diff --git a/surfsense_browser_extension/sidepanel/chat/QuickCapture.tsx b/surfsense_browser_extension/sidepanel/chat/QuickCapture.tsx
index ace4bbee7..4d3bbb9c6 100644
--- a/surfsense_browser_extension/sidepanel/chat/QuickCapture.tsx
+++ b/surfsense_browser_extension/sidepanel/chat/QuickCapture.tsx
@@ -39,8 +39,8 @@ export function QuickCapture() {
     };
 
     return (
-        <div className="sticky bottom-0 border-t p-3 bg-background">
-            <Button className="w-full" onClick={handleCapture}>
+        <div className="border-t p-3 bg-background">
+            <Button className="w-full" variant="outline" onClick={handleCapture}>
                 <Camera className="mr-2 h-4 w-4" />
                 Save Current Page
             </Button>
diff --git a/surfsense_browser_extension/sidepanel/dexscreener/TokenInfoCard.tsx b/surfsense_browser_extension/sidepanel/dexscreener/TokenInfoCard.tsx
index a39b159ec..0ed582d6a 100644
--- a/surfsense_browser_extension/sidepanel/dexscreener/TokenInfoCard.tsx
+++ b/surfsense_browser_extension/sidepanel/dexscreener/TokenInfoCard.tsx
@@ -179,43 +179,43 @@ export function TokenInfoCard({
                 </div>
             </div>
 
-            {/* Quick actions - now with 4 buttons */}
-            <div className="grid grid-cols-4 gap-1.5 mt-3">
+            {/* Quick actions - 4 buttons in grid, responsive */}
+            <div className="grid grid-cols-4 gap-1 mt-3">
                 <Button
                     size="sm"
                     variant="outline"
-                    className="h-8 px-2 text-xs"
+                    className="h-8 px-1.5 text-xs flex items-center justify-center"
                     onClick={() => handleQuickAction("safety")}
                 >
-                    <Shield className="mr-1 h-3 w-3" />
-                    Safety
+                    <Shield className="h-3 w-3 mr-0.5 flex-shrink-0" />
+                    <span className="truncate">Safety</span>
                 </Button>
                 <Button
                     size="sm"
                     variant="outline"
-                    className="h-8 px-2 text-xs"
+                    className="h-8 px-1.5 text-xs flex items-center justify-center"
                     onClick={() => handleQuickAction("holders")}
                 >
-                    <Users className="mr-1 h-3 w-3" />
-                    Holders
+                    <Users className="h-3 w-3 mr-0.5 flex-shrink-0" />
+                    <span className="truncate">Holders</span>
                 </Button>
                 <Button
                     size="sm"
                     variant="outline"
-                    className="h-8 px-2 text-xs"
+                    className="h-8 px-1.5 text-xs flex items-center justify-center"
                     onClick={() => handleQuickAction("predict")}
                 >
-                    <TrendingUp className="mr-1 h-3 w-3" />
-                    Predict
+                    <TrendingUp className="h-3 w-3 mr-0.5 flex-shrink-0" />
+                    <span className="truncate">Predict</span>
                 </Button>
                 <Button
                     size="sm"
                     variant="outline"
-                    className="h-8 px-2 text-xs text-orange-600 hover:text-orange-700 hover:bg-orange-50 dark:text-orange-400 dark:hover:bg-orange-950"
+                    className="h-8 px-1.5 text-xs flex items-center justify-center text-orange-600 hover:text-orange-700 hover:bg-orange-50 dark:text-orange-400 dark:hover:bg-orange-950"
                     onClick={() => handleQuickAction("rug")}
                 >
-                    <AlertTriangle className="mr-1 h-3 w-3" />
-                    Rug
+                    <AlertTriangle className="h-3 w-3 mr-0.5 flex-shrink-0" />
+                    <span className="truncate">Rug</span>
                 </Button>
             </div>
         </div>
diff --git a/surfsense_browser_extension/sidepanel/widgets/TokenAnalysisWidget.tsx b/surfsense_browser_extension/sidepanel/widgets/TokenAnalysisWidget.tsx
index 6e06a0311..26d4aea6c 100644
--- a/surfsense_browser_extension/sidepanel/widgets/TokenAnalysisWidget.tsx
+++ b/surfsense_browser_extension/sidepanel/widgets/TokenAnalysisWidget.tsx
@@ -178,15 +178,15 @@ export function TokenAnalysisWidget({
             )}
 
             {/* Action buttons */}
-            <div className="flex gap-2">
-                <Button size="sm" variant="outline" onClick={onAddToWatchlist} className="flex-1">
-                    <Star className="h-3 w-3 mr-1" />
-                    {isInWatchlist ? "In Watchlist" : "Add to Watchlist"}
+            <div className="flex gap-1.5 flex-wrap">
+                <Button size="sm" variant="outline" onClick={onAddToWatchlist} className="flex-1 min-w-0 text-xs h-8">
+                    <Star className="h-3 w-3 mr-1 flex-shrink-0" />
+                    <span className="truncate">{isInWatchlist ? "In Watchlist" : "Add to Watchlist"}</span>
                 </Button>
-                <Button size="sm" variant="outline" onClick={onSetAlert}>
+                <Button size="sm" variant="outline" onClick={onSetAlert} className="h-8 w-8 p-0 flex-shrink-0">
                     <Bell className="h-3 w-3" />
                 </Button>
-                <Button size="sm" variant="default" onClick={onAnalyzeFurther}>
+                <Button size="sm" variant="default" onClick={onAnalyzeFurther} className="text-xs h-8">
                     Analyze More
                 </Button>
             </div>
diff --git a/surfsense_browser_extension/tailwind.config.js b/surfsense_browser_extension/tailwind.config.js
index 94ec92383..d1c954054 100644
--- a/surfsense_browser_extension/tailwind.config.js
+++ b/surfsense_browser_extension/tailwind.config.js
@@ -3,7 +3,13 @@ const { fontFamily } = require("tailwindcss/defaultTheme");
 /** @type {import('tailwindcss').Config} */
 module.exports = {
 	darkMode: ["class"],
-	content: ["./*.{js,jsx,ts,tsx}", "./routes/*.tsx", "./routes/**/*.tsx"],
+	content: [
+		"./*.{js,jsx,ts,tsx}",
+		"./routes/**/*.{js,jsx,ts,tsx}",
+		"./sidepanel/**/*.{js,jsx,ts,tsx}",
+		"./lib/**/*.{js,jsx,ts,tsx}",
+		"./background/**/*.{js,jsx,ts,tsx}",
+	],
 	theme: {
 		container: {
 			center: true,