Refactor AppShell and Chat components for improved layout and mobile responsiveness#3
Merged
etsraphael merged 2 commits intomainfrom Mar 18, 2026
Merged
Conversation
There was a problem hiding this comment.
Pull request overview
Refactors the Chat page layout and the AppShell spacing to improve mobile responsiveness, including a slide-in history sidebar for smaller screens.
Changes:
- Added a mobile slide-in session history sidebar with backdrop and close controls in
Chat. - Adjusted Chat spacing/sizing for messages and input bar across breakpoints.
- Tightened AppShell header/content padding and enabled horizontal scrolling for nav tabs on small screens.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| forge-fe/src/pages/Chat.tsx | Adds mobile sidebar/backdrop and updates responsive spacing for chat UI. |
| forge-fe/src/components/app-shell.tsx | Tweaks responsive padding and makes nav horizontally scrollable on small screens. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <> | ||
| {/* Mobile backdrop */} | ||
| {open && ( | ||
| <div |
Comment on lines
+127
to
+136
| <span | ||
| onClick={(e) => { | ||
| e.stopPropagation() | ||
| onDelete(s.id) | ||
| }} | ||
| title="Delete" | ||
| className="mt-0.5 shrink-0 rounded p-0.5 opacity-50 transition-opacity hover:text-red-400 md:opacity-0 md:group-hover:opacity-100" | ||
| > | ||
| <Trash2 className="size-3" /> | ||
| </span> |
| className={cn( | ||
| 'flex w-56 shrink-0 flex-col border-r border-border bg-background', | ||
| 'fixed inset-y-0 left-0 z-50 transition-transform duration-200 md:relative md:z-auto md:translate-x-0 md:transition-none', | ||
| open ? 'translate-x-0' : '-translate-x-full', |
| <div className="flex items-center border-b border-border px-3 py-2 md:hidden"> | ||
| <button | ||
| onClick={() => setSidebarOpen(true)} | ||
| className="flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-surface-hover hover:text-foreground" |
…ess for pull requests and issues
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Enhance the layout and mobile responsiveness of the AppShell and Chat components by adjusting styles and implementing a sidebar for better navigation on smaller screens. This update improves user experience across devices.