fix(ui): add sidebar dismiss controls and improve 1080p chat responsiveness - #143
fix(ui): add sidebar dismiss controls and improve 1080p chat responsiveness#143sumitahmed wants to merge 2 commits into
Conversation
…veness of the application
There was a problem hiding this comment.
🟡 Changes recommended
There are a couple of concrete issues in the updated Sidebar implementation (duplicate chat-list fetching and a likely invalid Tailwind class) that should be corrected before merge.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR improves the chat UI’s usability and responsiveness by making both the chat history drawer and the “Important Topics” sidebar dismissible/collapsible, while also hardening the layout against wide markdown/code content on 1080p/scaled viewports.
Changes:
- Added a collapsible “Important Topics” sidebar with a floating reopen control, and tightened the chat layout to better fit 1080p/scaled screens.
- Improved markdown rendering/layout behavior for wide content (tables/code/long words) to reduce grid blowouts and enable cleaner horizontal scrolling.
- Reworked the chat history drawer interaction to support explicit close controls, click-outside dismissal, and Escape-to-dismiss behavior.
File summaries
| File | Description |
|---|---|
| frontend/src/pages/Chat.tsx | Adds topics sidebar collapse/reopen behavior and adjusts chat column sizing for better responsiveness. |
| frontend/src/components/Sidebar.tsx | Implements dismiss controls for the chat history drawer (backdrop click + Esc + close button). |
| frontend/src/components/Chat/MarkdownView.tsx | Updates markdown element styling to improve wrapping and horizontal overflow behavior. |
| frontend/src/components/Chat/FlashCards.tsx | Adds an optional collapse control to the topics sidebar header and refines sidebar layout. |
Review details
- Files reviewed: 4/4 changed files
- Comments generated: 2
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| @@ -20,32 +20,103 @@ | |||
| getChats().then(data => setChats(data)); | |||
| }, []); | |||
|
|
|||
| // Fetch updated list whenever the drawer is toggled open | |||
| useEffect(() => { | |||
| if (isToggled) { | |||
| getChats().then(data => setChats(data)); | |||
| } | |||
| }, [isToggled]); | |||
| <div | ||
| className="fixed inset-0 bg-black/40 backdrop-blur-xs z-30 transition-opacity" | ||
| onClick={() => setIsToggled(false)} |
There was a problem hiding this comment.
🟡 Changes recommended
The sidebar now fetches chats on open but can show a misleading empty state while loading (and lacks error handling), and the markdown container’s overflow-hidden can clip wide content and defeat the intended horizontal scrolling behavior.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Review details
Suppressed comments (3)
Previously missed (2) — in code that hasn't changed since the last review.
frontend/src/components/Chat/MarkdownView.tsx:51
overflow-hiddenon the Markdown container can clip wide content (e.g., wide KaTeX display equations or other non-code elements) and prevents the parentoverflow-x-autowrapper inChat.tsxfrom providing horizontal scrolling for those cases. Prefer allowing overflow (or usingoverflow-x-auto) while keeping the element shrinkable withmin-w-0.
frontend/src/components/Sidebar.tsx:53- The
idvalueidkis non-descriptive and can make future DOM/CSS debugging harder. Since this component no longer relies on DOM lookups, consider renaming it to a semantic id (or removing it entirely).
This issue also appears on line 100 of the same file.
frontend/src/components/Sidebar.tsx:100
- The
idvalueidk0is non-descriptive and can make future DOM/CSS debugging harder. Consider renaming it to a semantic id (or removing it entirely).
id='idk0'
- Files reviewed: 4/4 changed files
- Comments generated: 2
- Review effort level: Lite
| useEffect(() => { | ||
| getChats().then(data => setChats(data)); | ||
| }, []); | ||
| if (isToggled) { | ||
| getChats().then(data => setChats(data)); | ||
| } | ||
| }, [isToggled]); |
| <div className="flex-1 overflow-y-auto space-y-1"> | ||
| {chats?.chats?.length ? ( | ||
| chats.chats.map((chat) => ( | ||
| <Link | ||
| key={chat.id} | ||
| to={`/chat/?chatId=${chat.id}`} | ||
| onClick={() => setIsToggled(false)} | ||
| className='p-2.5 hover:text-stone-100 hover:bg-stone-900/90 rounded-xl block text-sm truncate border border-transparent hover:border-stone-800 transition-colors' | ||
| > | ||
| {chat.title || 'Untitled Chat'} | ||
| </Link> | ||
| )) | ||
| ) : ( | ||
| <p className="text-xs text-stone-500 text-center py-6">No previous chats</p> | ||
| )} | ||
| </div> |
📝 Description
This PR resolves two key UI/UX responsiveness and layout issues in the chat interface:
Chat History Sidebar Dismissal:
✕) button in the history drawer header.Escapekey listener to dismiss the drawer.1080p & Scaled Screen Responsiveness:
min-w-0to the CSS Grid chat column to prevent grid blowouts caused by wide code snippets and ASCII diagrams.overflow-x-auto max-w-fullfor clean horizontal scrolling.🔄 Type of Change
🧪 Testing
Testing details:
npm run buildat root and infrontend/(tsc -b --noEmit && vite build) — passes with 0 errors.Escapekey.📷 Screenshots (if applicable)
1. Chat History Sidebar (Before vs. After)
Before (No close button, no backdrop, traps chat view):
After (Added header with close button '✕' & click-outside backdrop):
📋 Code Review Checklist
🔗 Related Issues
None
🚀 Deployment Notes
None (pure frontend UI enhancement; no new dependencies introduced).
💬 Additional Context
While working on this, I noticed a few other UI/UX areas that could be polished (such as replacing raw emojis with consistent SVG icons and unifying typography styles across pages).
I kept this PR strictly focused on the sidebar toggle and responsiveness issues, but if the team is interested, I'd be happy to work on those in follow-up PRs!