refactor(thread): improve layout and responsiveness of welcome message

[MODSetter]

Description

Motivation and Context

FIX #

Screenshots

API Changes

• This PR includes API changes

Change Type

• Bug fix
• New feature
• Performance improvement
• Refactoring
• Documentation
• Dependency/Build system
• Breaking change
• Other (specify):

Testing Performed

• Tested locally
• Manual/QA verification

Checklist

• Follows project coding standards and conventions
• Documentation updated as needed
• Dependencies updated as needed
• No lint/build errors or new warnings
• All relevant tests are passing

High-level PR Summary

This PR refactors the layout and responsiveness of the welcome message in the thread component. The main change restructures the welcome message and composer positioning to use a flexible layout with responsive breakpoints, replacing absolute positioning on smaller screens with a natural flex layout. Additionally, the chat example prompts component receives minor adjustments to improve focus behavior and make the scroll area height more responsive using clamp() for better viewport adaptation.

⏱️ Estimated Review Time: 5-15 minutes

💡 Review Order Suggestion

Order	File Path
1	surfsense_web/components/assistant-ui/thread.tsx
2	surfsense_web/components/new-chat/chat-example-prompts.tsx

Summary by CodeRabbit

• Style
  • Refined welcome area layout with improved responsive positioning for better multi-device support
  • Enhanced prompt list styling with optimized responsive sizing and spacing adjustments for improved visual presentation across different screen sizes

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
surf-sense-frontend	Building	Preview, Comment	Jun 2, 2026 3:34am

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1ee7b4c5-ba9d-41c0-bcb8-b34a3c43efe1

📥 Commits

Reviewing files that changed from the base of the PR and between d0194f4 and 0870571.

📒 Files selected for processing (2)

• surfsense_web/components/assistant-ui/thread.tsx
• surfsense_web/components/new-chat/chat-example-prompts.tsx

---

📝 Walkthrough

Walkthrough

Two UI components receive responsive layout improvements: the assistant thread welcome area transitions from absolute positioning to flex-based responsive layout with sm: breakpoint rules, and the chat example prompts component updates focus visibility styling and adopts responsive height scaling using CSS clamp() in place of fixed sizing.

Changes

Responsive UI Layout Improvements

Layer / File(s)	Summary
Thread welcome component flex-based layout surfsense_web/components/assistant-ui/thread.tsx	ThreadWelcome greeting and Composer elements reorganized from absolute positioning anchored to viewport center (bottom-[calc(50%+5rem)], top-[calc(50%-3.5rem)]) into flex-based containers using my-auto, gap-*, and responsive sm: rules.
Chat example prompts focus and responsive height surfsense_web/components/new-chat/chat-example-prompts.tsx	TabsContent reformatted with focus-visible outline reset class added to className. Inner ScrollArea height converted from fixed max-h-48 to responsive h-[clamp(...)] sizing, and prompt list padding adjusted from pr-2 to pr-3.

🎯 1 (Trivial) | ⏱️ ~3 minutes

🐰 The layouts bend and flex with grace,
Responsive rules now find their place,
No more anchors to viewport's core,
The components dance—much better than before! ✨

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch docker-hot-patch

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}