UI Improvements for Chatbot Interface

[taichan03]

1. Fix Title Overlapping:

Ensure that the title of the chatbot remains within its designated area without overlapping other elements.
When the title text is too long, it should either truncate or wrap within the title container.
Add a tooltip to display the full title when truncated, if necessary.

2. Dynamic Resizing for All Screen Sizes:

Implement responsive design principles to ensure that the chatbot interface adapts to various screen sizes (desktop, tablet, mobile).
Use CSS media queries to adjust the layout, font size, and spacing to provide a consistent user experience across devices.
Test the resizing on common breakpoints (e.g., 320px, 768px, 1024px) to ensure optimal display.

3. Scrollbar Containment:

Ensure the scrollbar stays within the bounds of the chatbot interface, eliminating any overlapping with other elements.
The scrollbar should be clearly visible only within the scrollable area, maintaining a clean and visually appealing design.
For mobile and touch devices, implement smooth scrolling to improve usability.