ui: mobile chatbot improvements

[dancer]

background

the chatbot had issues with user messages appearing on the left instead of right, edit buttons shifting layout when hovered, poor mobile scrolling, and ugly scrollbars. needed to fix message alignment and make the interface work better on mobile devices.

summary

• fixed user messages to appear on right side with blue bubbles
• made edit icon appear on hover without shifting message position
• added smooth mobile scrolling and touch optimizations
• created minimal 6px scrollbars that match the theme
• fixed accessibility issues with sidebar and tooltips
• made input box smaller and cleaner (44px height)
• moved scroll-to-bottom button above input instead of covering it

verification

tested on mobile safari, android chrome, and desktop browsers. all message alignment works correctly, edit icons don't shift layout, and scrolling is smooth.

changes

user message alignment

• user messages now appear on right side with proper blue bubbles
• fixed flexbox layout to use justify-end and items-end
• messages have max-width of 70% and right-aligned text
• blue background (#006cff) with white text and rounded corners

edit icon positioning

• edit icon appears on hover without shifting message layout
• uses absolute positioning relative to copy button wrapper
• positioned -left-9 (36px) from copy button for good spacing
• smooth opacity transition when hovering over messages

mobile scrolling

• added touch-pan-y for better mobile scroll behavior
• hardware-accelerated scrolling with -webkit-overflow-scrolling: touch
• overscroll-behavior: contain to prevent bounce effects

minimal scrollbars

• 6px width instead of default thick scrollbars
• uses theme colors (border and muted-foreground variables)
• transparent track with rounded scroll thumb
• hover effects for better interaction

input improvements

• reduced height from 72px to 44px for better mobile feel
• removed focus ring that was showing after unfocus
• cleaner border styling without heavy shadows
• better button styling for send/attach buttons

scroll button fix

• moved from bottom-20 to -top-12 so it appears above input
• no longer covers or interferes with input area
• clean positioning with proper spacing

accessibility fixes

• added SheetTitle with sr-only class to fix sidebar console error
• hidden tooltips on mobile to prevent accidental triggers
• proper aria labeling for screen readers

thinking message

• reduced auto-close delay from 1000ms to 500ms
• smaller text (text-xs) and tighter spacing
• smooth gradient animation for "thinking..." text

tasks

• fixed user message right alignment with blue bubbles
• made edit icon hover without layout shifts
• added mobile touch scrolling optimizations
• created minimal 6px scrollbars
• fixed sidebar accessibility console error
• made input box 44px height and cleaner styling
• moved scroll button above input area
• improved message actions spacing
• added thinking message improvements

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
ai-chatbot	Ready	Preview	Comment	Sep 6, 2025 11:00pm