Improve mobile responsiveness with Tailwind breakpoints

- Replace fixed-width containers (min-w-xl max-w-xl) with responsive classes
- Mobile: full width with padding, Tablet: 90% max 768px, Desktop: max 1024px
- Make ChatScreen header stack vertically on mobile, horizontal on desktop
- Add touch-friendly button sizes (min 44x44px tap targets)
- Optimize textarea and form inputs for mobile keyboards
- Add text wrapping (break-words) to message bubbles to prevent overflow
- Apply responsive text sizing (text-sm sm:text-base) throughout
- Improve ConversationList with touch-friendly hit areas
- Add responsive padding/spacing across all components

All components now use standard Tailwind breakpoints:
- sm: 640px+ (tablet)
- md: 768px+ (larger tablet)
- lg: 1024px+ (desktop)
- xl: 1280px+ (large desktop)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

raggr-frontend/src/components/ConversationList.tsx

@@ -38,22 +38,25 @@ export const ConversationList = ({
   }, []);
 
   return (
-    <div className="bg-indigo-300 rounded-md p-3 flex flex-col">
+    <div className="bg-indigo-300 rounded-md p-3 sm:p-4 flex flex-col gap-1">
       {conservations.map((conversation) => {
         return (
           <div
-            className="border-blue-400 bg-indigo-300 hover:bg-indigo-200 cursor-pointer rounded-md p-2"
+            key={conversation.id}
+            className="border-blue-400 bg-indigo-300 hover:bg-indigo-200 cursor-pointer rounded-md p-3 min-h-[44px] flex items-center"
             onClick={() => onSelectConversation(conversation)}
           >
-            <p>{conversation.title}</p>
+            <p className="text-sm sm:text-base break-words">
+              {conversation.title}
+            </p>
           </div>
         );
       })}
       <div
-        className="border-blue-400 bg-indigo-300 hover:bg-indigo-200 cursor-pointer rounded-md p-2"
+        className="border-blue-400 bg-indigo-300 hover:bg-indigo-200 cursor-pointer rounded-md p-3 min-h-[44px] flex items-center"
         onClick={() => onCreateNewConversation()}
       >
-        <p> + Start a new thread</p>
+        <p className="text-sm sm:text-base"> + Start a new thread</p>
       </div>
     </div>
   );