improve: Resolve overlapping "Ask" button and improve input field text visibility (#165)

* improve: enhance input field layout for better text visibility

- Add right padding (pr-32) to input field to ensure text visibility
- Maintain button position while providing adequate space for text content
- Improve user experience for long text input

* improve: optimize button width measurement

- Replace ResizeObserver with direct width measurement
- Update width calculation on button text and loading state changes
- Simplify implementation while maintaining functionality

Author: segurvita

src/components/Ask.tsx

@@ -604,6 +604,17 @@ const Ask: React.FC<AskProps> = ({
     }
   };
 
+  const [buttonWidth, setButtonWidth] = useState(0);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  // Measure button width and update state
+  useEffect(() => {
+    if (buttonRef.current) {
+      const width = buttonRef.current.offsetWidth;
+      setButtonWidth(width);
+    }
+  }, [messages.ask?.askButton, isLoading]);
+
   return (
     <div>
       <div className="p-4">
@@ -631,9 +642,11 @@ const Ask: React.FC<AskProps> = ({
               onChange={(e) => setQuestion(e.target.value)}
               placeholder={messages.ask?.placeholder || 'What would you like to know about this codebase?'}
               className="block w-full rounded-md border border-[var(--border-color)] bg-[var(--input-bg)] text-[var(--foreground)] px-5 py-3.5 text-base shadow-sm focus:border-[var(--accent-primary)] focus:ring-2 focus:ring-[var(--accent-primary)]/30 focus:outline-none transition-all"
+              style={{ paddingRight: `${buttonWidth + 24}px` }}
               disabled={isLoading}
             />
             <button
+              ref={buttonRef}
               type="submit"
               disabled={isLoading || !question.trim()}
               className={`absolute right-3 top-1/2 transform -translate-y-1/2 px-4 py-2 rounded-md font-medium text-sm ${