fix(frontend): make fullscreen chat panel scrollable

This commit is contained in:
laansdole 2026-03-16 17:51:19 +07:00
parent 75e889decf
commit 7cd1bf5da8
4 changed files with 34 additions and 0 deletions

View File

@ -2436,6 +2436,7 @@ watch(
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0;
} }
.chat-messages::-webkit-scrollbar { .chat-messages::-webkit-scrollbar {

View File

@ -0,0 +1,12 @@
# Change: Fix Fullscreen Chat Panel Scrolling
## Why
After the persistent chat panel refactoring (commits `5525813` and `d796015`), the fullscreen chat mode is no longer scrollable. When the chat panel is in fullscreen mode (`viewMode === 'chat'`), messages accumulate but users cannot scroll through them.
## What Changes
- Fix CSS flexbox chain in `LaunchView.vue` so that `overflow-y: auto` on `.chat-messages` activates correctly in fullscreen mode
- Add `min-height: 0` to intermediate flex containers (`.chat-panel-content` and `.chat-box`) to allow them to shrink below their content size
## Impact
- Affected specs: chat-panel (new capability spec)
- Affected code: `frontend/src/pages/LaunchView.vue` (CSS only, ~23 lines)

View File

@ -0,0 +1,14 @@
## ADDED Requirements
### Requirement: Fullscreen Chat Scrolling
The chat messages area SHALL be scrollable when the chat panel is in fullscreen mode and messages exceed the visible viewport height.
#### Scenario: Messages overflow in fullscreen chat
- **WHEN** the chat panel is in fullscreen mode (`viewMode === 'chat'`)
- **AND** the number of chat messages exceeds the visible area
- **THEN** the `.chat-messages` container SHALL allow vertical scrolling via `overflow-y: auto`
#### Scenario: Scroll position preserved on new message
- **WHEN** the user is scrolled to the bottom of the chat
- **AND** a new message arrives
- **THEN** the chat SHALL auto-scroll to show the latest message

View File

@ -0,0 +1,7 @@
## 1. Implementation
- [x] 1.1 Add `min-height: 0` to `.chat-panel-content` in `LaunchView.vue`
- [x] 1.2 Add `min-height: 0` to `.chat-box` in `LaunchView.vue`
## 2. Verification
- [x] 2.1 Run `openspec validate fix-fullscreen-chat-scroll --strict --no-interactive`
- [ ] 2.2 Manual visual test: open app, verify fullscreen chat scrolls when messages overflow