Ryan Chen
19d1df2f68
- 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>
12 lines
278 B
TypeScript
12 lines
278 B
TypeScript
type QuestionBubbleProps = {
|
|
text: string;
|
|
};
|
|
|
|
export const QuestionBubble = ({ text }: QuestionBubbleProps) => {
|
|
return (
|
|
<div className="rounded-md bg-stone-200 p-3 sm:p-4 break-words overflow-wrap-anywhere text-sm sm:text-base">
|
|
🤦: {text}
|
|
</div>
|
|
);
|
|
};
|