From 1342e2d22e7dc4a786da05aa9f25cf82b3cdf6a5 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Thu, 25 Sep 2025 09:23:57 -0400
Subject: [PATCH] fix: use solid border approach for spell check visibility

- Replace faint text-decoration with solid red border
- Add subtle red background tint for extra emphasis
- Use borderBottom: '2px solid #ef4444' for reliable visibility
- Add rounded corners and proper padding
- Fixes issue where text-decoration was barely visible (same issue we had with highlight component)
---
 ui/desktop/src/components/RichChatInput.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/ui/desktop/src/components/RichChatInput.tsx b/ui/desktop/src/components/RichChatInput.tsx
index 8e8e5effe2..ed31966372 100644
--- a/ui/desktop/src/components/RichChatInput.tsx
+++ b/ui/desktop/src/components/RichChatInput.tsx
@@ -321,14 +321,13 @@ export const RichChatInput = forwardRef<RichChatInputRef, RichChatInputProps>(({
             key={`misspelled-${keyCounter++}`} 
             className="inline whitespace-pre-wrap"
             style={{
-              textDecoration: 'underline',
-              textDecorationColor: '#dc2626', // Bright red
-              textDecorationStyle: 'wavy', // Wavy line like in Word
-              textDecorationThickness: '2px',
-              textUnderlineOffset: '3px',
-              // Fallback for browsers that don't support wavy
-              borderBottom: '2px dotted #dc2626',
-              paddingBottom: '1px'
+              // Use a solid red bottom border instead of text-decoration
+              borderBottom: '2px solid #ef4444',
+              // Add a subtle red background tint
+              backgroundColor: 'rgba(239, 68, 68, 0.1)',
+              // Small padding for better appearance
+              paddingBottom: '1px',
+              borderRadius: '2px'
             }}
             title={`Possible misspelling: ${content}`}
           >