[optimize] Mobile responsive design for Dashboard routes

[Copilot]

Mobile Adaptation for Dashboard Routes ✅

All Tasks Completed:

• Update SessionBox component to use MUI Drawer for mobile view
• Add responsive breakpoints and mobile menu toggle
• Update dashboard index page for mobile layout
• Update project evaluation page for mobile layout
• Test responsive behavior - dev server starts successfully
• Run linting and validation - all checks pass
• Code review completed - no issues
• Security scan completed - no vulnerabilities
• Addressed review feedback - using Material Icons and unified Drawer
• Refactored to use SymbolIcon component
• Single unified drawer structure (not two separate ones)
• Code quality improvements: PropsWithChildren, extracted constants, separate module, Tailwind CSS
• Migrated ALL PR files to use Tailwind CSS globally

Latest Changes (complete Tailwind CSS migration):

1. SessionBox Component (components/User/SessionBox.tsx)

   • Migrated List padding: sx={{ px: 2 }} → className="px-2"
   • Migrated ListItemButton borderRadius: sx={{ borderRadius: 1 }} → className="rounded"
   • Only kept sx for MUI Drawer paper and Modal boxShadow (internal APIs)

2. Dashboard Index Page (pages/dashboard/index.tsx)

   • Container: sx={{ py: { xs: 3, md: 8 } }} → className="py-3 md:py-8"
   • Typography (h3): Responsive font sizes with Tailwind classes
   • Form: Converted Box to native <form> with Tailwind flex classes
   • Button: sx={{ whiteSpace, minWidth }} → className="min-w-full whitespace-nowrap sm:min-w-0"
   • Typography (h5): Responsive font sizes with Tailwind
   • Typography (no data): sx={{ textAlign, mt }} → className="mt-4 text-center"

3. Project Evaluation Page (pages/dashboard/project/[id].tsx)

   • Container: Full Tailwind migration for height, flex, gap, padding
   • Title Typography: Complete Tailwind classes for responsive sizing and spacing
   • Chat message containers: Converted Box to native <div> with Tailwind
   • Avatar: Removed duplicate sx, using only Tailwind classes
   • Paper components: Tailwind for padding, margin, flex
   • Message bubbles: Tailwind for layout, sizing, opacity
   • Input form: Tailwind for flex direction and alignment
   • Only kept sx for MUI-specific backgroundColor/color (theme values)

Tailwind CSS Coverage:

• ✅ Layout: flex, flex-col, flex-row, flex-1
• ✅ Responsive: xs:, sm:, md: breakpoint prefixes
• ✅ Spacing: p-*, px-*, py-*, m-*, mt-*, mb-*, gap-*
• ✅ Sizing: w-*, h-*, min-w-*, max-w-*
• ✅ Typography: text-*, font sizes with brackets text-[1.5rem]
• ✅ Positioning: sticky, absolute, top-*, left-*, translate-*
• ✅ Borders: border-*, rounded, rounded-[custom]
• ✅ Display: hidden, block
• ✅ Alignment: items-*, justify-*, text-center
• ✅ Effects: opacity-*, shadow-*
• ✅ Other: z-[1100], overflow-*, whitespace-nowrap

Remaining MUI sx Usage (necessary for MUI internals):

• Drawer paper customization (.MuiDrawer-paper selector)
• Modal boxShadow (MUI's 0-24 scale)
• MUI theme colors (primary.light, primary.contrastText)
• Grid spacing (Grid component specific prop)

Code Reduction:

• 115 lines removed across all dashboard pages!
• Cleaner, more maintainable code
• Consistent Tailwind-first approach across the entire PR

The mobile adaptation is complete with comprehensive Tailwind CSS migration across all modified files!

Original prompt

---

This section details on the original issue you should resolve

<issue_title>移动端适配</issue_title>
<issue_description>主要是 /dashboard 路由下的所有页面没有做移动端适配。</issue_description>

Comments on the Issue (you are @copilot in this section)

@TechQuery @Soecka 顺道把 MUI 7 升了吧：https://mui.com/material-ui/migration/upgrade-to-v7/ @TechQuery > [@Soecka](https://github.com/Soecka) 顺道把 MUI 7 升了吧：https://mui.com/material-ui/migration/upgrade-to-v7/

@Soecka Emotion 是不是一直没启用啊？

</comment_new>
<comment_new>@TechQuery
@Soecka 后台管理的所有报错均已解决，并已上线，但移动端适配我没精力做，也不熟悉 MUI，你抽空搞一下吧：#82 (comment)</comment_new>

Fixes #59

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[TechQuery]

@copilot

[TechQuery]

@copilot

[TechQuery]

全局都优先使用 Tailwind CSS 类名，除非是过于动态或只有内部 API 才能实现的样式修改。

[Copilot]

Migrated SessionBox to use Tailwind CSS classes (flex, flex-col, md:flex-row, sticky, top-0, z-[1100], border-b, p-1, md:hidden, bg-background-paper, border-divider, w-[250px], flex-1, px-2, pb-3, sm:px-3, etc.). Only kept MUI sx for boxShadow and Drawer paper customization which are MUI-specific internal APIs. (commit 61e7041)

[TechQuery]

全局都优先使用 Tailwind CSS 类名

@copilot 我说的“全局”指的是整个项目，至少也是本 PR 所有文件。

[Copilot]

Migrated all files in this PR to use Tailwind CSS classes globally:

• SessionBox: List padding, ListItemButton borderRadius
• Dashboard index: Container, Typography, Form, Button (removed 33 lines of sx)
• Project evaluation: Container, Typography, all chat message layout, Avatar, Paper, form inputs (removed 82 lines of sx)

Only kept MUI sx for:

• Drawer paper customization (MUI internal selector)
• Modal boxShadow (MUI's 0-24 scale)
• Theme color values (primary.light, primary.contrastText)
• Grid spacing (component-specific prop)

Total: 115 lines of sx code removed across all PR files. (commit f4a94e4)