From 5d9a4a663c111ea05eeb1671eadc4cb77f8a0cba Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Thu, 25 Sep 2025 09:22:59 -0400
Subject: [PATCH] fix: make spell check underlines much more visible

- Change from dotted to wavy underline (like Microsoft Word)
- Add fallback border for browser compatibility
- Increase underline offset and add padding
- Use brighter red color for better visibility
- Addresses issue where spell check lines were barely visible
---
 ui/desktop/src/components/RichChatInput.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/ui/desktop/src/components/RichChatInput.tsx b/ui/desktop/src/components/RichChatInput.tsx
index 02bf239d9d..8e8e5effe2 100644
--- a/ui/desktop/src/components/RichChatInput.tsx
+++ b/ui/desktop/src/components/RichChatInput.tsx
@@ -322,10 +322,13 @@ export const RichChatInput = forwardRef<RichChatInputRef, RichChatInputProps>(({
             className="inline whitespace-pre-wrap"
             style={{
               textDecoration: 'underline',
-              textDecorationColor: '#dc2626', // red-600
-              textDecorationStyle: 'dotted',
+              textDecorationColor: '#dc2626', // Bright red
+              textDecorationStyle: 'wavy', // Wavy line like in Word
               textDecorationThickness: '2px',
-              textUnderlineOffset: '2px'
+              textUnderlineOffset: '3px',
+              // Fallback for browsers that don't support wavy
+              borderBottom: '2px dotted #dc2626',
+              paddingBottom: '1px'
             }}
             title={`Possible misspelling: ${content}`}
           >