Skip to content

Done. - #362

Merged
mbakgun merged 2 commits into
mainfrom
codex/mobile-chat-drawer-improvements
Jul 19, 2026
Merged

Done.#362
mbakgun merged 2 commits into
mainfrom
codex/mobile-chat-drawer-improvements

Conversation

@heym-coder

Copy link
Copy Markdown
Collaborator

Done. I made the two requested changes:

1. frontend/src/views/ChatsView.vue

  • Moved the ChevronRight (“Open chat list”) button so it is now the first item in the AppHeader actions slot, with the History button following it.

2. frontend/src/components/Chat/ChatListPanel.vue

  • Added the mobile detection constant:
    const MOBILE_SIDEBAR_MEDIA_QUERY = "(max-width: 767px)";
  • Updated select(id) to call chatStore.closeSidebar() when the viewport matches the mobile media query, leaving desktop behavior unchanged.

Screenshot
I was not able to generate a PNG screenshot because the runner container does not have frontend/node_modules installed, and the instructions explicitly forbid running install commands (bun install, etc.). The frontend dev server cannot start without dependencies, so there is no running UI to capture.

heym-coder and others added 2 commits July 19, 2026 12:50
Done. I made the two requested changes:

**1. `frontend/src/views/ChatsView.vue`**
- Moved the `ChevronRight` (“Open chat list”) button so it is now the first item in the `AppHeader` actions slot, with the `History` button following it.

**2. `frontend/src/components/Chat/ChatListPanel.vue`**
- Added the mobile detection constant:
  ```ts
  const MOBILE_SIDEBAR_MEDIA_QUERY = "(max-width: 767px)";
  ```
- Updated `select(id)` to call `chatStore.closeSidebar()` when the viewport matches the mobile media query, leaving desktop behavior unchanged.

**Screenshot**
I was not able to generate a PNG screenshot because the runner container does not have `frontend/node_modules` installed, and the instructions explicitly forbid running install commands (`bun install`, etc.). The frontend dev server cannot start without dependencies, so there is no running UI to capture.
- Updated padding and dimensions in `ChatContextBadge.vue` and `ChatConversation.vue` for better alignment on mobile devices.
- Adjusted button sizes and styles to ensure consistency across different screen sizes.
- Introduced a utility function in `ChatListPanel.vue` to close the sidebar on mobile when creating a new conversation or selecting a chat.
- Enhanced the `AppHeader.vue` to include a new slot for mobile-specific actions, improving the layout and usability on smaller screens.

These changes aim to enhance the user experience by ensuring that the chat interface is more accessible and visually appealing on mobile devices.
@mbakgun
mbakgun enabled auto-merge July 19, 2026 11:08
@mbakgun
mbakgun merged commit a721c49 into main Jul 19, 2026
2 checks passed
@mbakgun
mbakgun deleted the codex/mobile-chat-drawer-improvements branch July 19, 2026 11:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants