fix: responsive polish for Session and Project detail pages#76
fix: responsive polish for Session and Project detail pages#76
Conversation
- SessionClient: stack stats on mobile, full-width messages, responsive timeline dots - ProjectClient: hide dividers on mobile, stack stats, truncate model names, responsive timeline - Both: sm: breakpoints, break-words for long text, min-h touch targets on buttons - Pattern matches dashboard tabs (mobile cards, desktop layouts)
There was a problem hiding this comment.
Pull request overview
Responsive UI polish for the Session and Project detail pages in the dashboard, aligning their mobile behavior with other responsive pages in the app.
Changes:
- Adjusted header/stats layouts to stack and wrap cleanly on small screens.
- Updated message/timeline bubbles to be full-width on mobile with safer word-wrapping and smaller padding.
- Tweaked Project session cards for cleaner mobile presentation (hide dividers/timestamps, truncate long fields).
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| frontend/src/app/dashboard/sessions/[id]/SessionClient.tsx | Mobile-friendly session header + timeline/message bubble layout adjustments (wrapping, padding, widths). |
| frontend/src/app/dashboard/projects/[id]/ProjectClient.tsx | Mobile-friendly project stats + session cards + unified timeline bubble wrapping/padding updates. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div className="relative pl-8 sm:pl-12 flex justify-end"> | ||
| <div className="absolute left-1.5 sm:left-3.5 top-3 size-3 rounded-full bg-blue-500 ring-4 ring-background z-10" /> | ||
| <div className={`rounded-lg border border-blue-500/20 bg-blue-500/10 p-3 sm:p-4 max-w-full sm:max-w-[80%] ${isError ? "border-red-500/30 bg-red-500/10" : ""}`}> |
There was a problem hiding this comment.
The timeline dot was moved to left-1.5 on mobile, but the vertical timeline line is still positioned at left-5 (see the "Vertical timeline line" div). This will misalign dots vs the line on small screens (desktop still aligns because sm:left-3.5 centers on left-5). Consider making the line responsive (e.g. left-3 sm:left-5) or adjusting the mobile dot position/padding so the dot center stays on the line.
| <span className="font-medium truncate group-hover:text-emerald-400 transition-colors"> | ||
| {session.title.length > 80 ? session.title.slice(0, 80) + "..." : session.title} | ||
| </span> |
There was a problem hiding this comment.
PR description mentions removing the fixed max width on session titles to rely on “natural truncation”, but this card still hard-caps titles via session.title.slice(0, 80) + "...". With the max-width removed, this manual slicing becomes the main limiter (even on wide screens) and can conflict with truncate. Consider removing the manual slice and relying on CSS truncation (or making the slice conditional on viewport) so behavior matches the PR intent.
Changes
Responsive polish for the two Clawatch detail pages — Session and Project views.
SessionClient.tsx
max-w-full→sm:max-w-[80%])left-1.5mobile →left-3.5desktop)break-wordson long titles and message contentp-3 sm:p-4)ProjectClient.tsx
hidden sm:block)max-w-[500px]on session titles (use natural truncation)max-w-[120px] sm:max-w-none)break-wordsand smaller paddingmin-h-[28px])Follows the same responsive pattern as ApprovalQueue, TravelBooking, Employees, and SlackBotConfig pages.