Skip to content

fix: enable scrolling in PromptPanel when content overflows#171

Merged
Dimillian merged 2 commits intoDimillian:mainfrom
kzheart:fix/prompt-panel-scroll
Jan 21, 2026
Merged

fix: enable scrolling in PromptPanel when content overflows#171
Dimillian merged 2 commits intoDimillian:mainfrom
kzheart:fix/prompt-panel-scroll

Conversation

@kzheart
Copy link
Contributor

@kzheart kzheart commented Jan 21, 2026

Summary

Fixes the issue where the General Prompts panel could not be scrolled when the prompt list exceeded the viewport height, making lower prompts inaccessible.

Screenshots

Before fix

image

After fix

image

What changed?

  • Added .prompt-panel-scroll container with overflow-y: auto to enable scrolling
  • Restructured layout hierarchy: header (fixed) → search bar (fixed) → scrollable content
  • Moved editor and prompt sections into the scrollable container
  • Added padding-bottom: 12px for better visual experience when scrolled to bottom

Technical details

  • Follows the same scrolling pattern as diff.css and file-tree.css
  • Uses flex: 1 + min-height: 0 + overflow-y: auto for proper flex container scrolling
  • Keeps header and search bar fixed at top for consistent UX
  • Aligns with existing .right-panel-top { overflow: hidden } constraint

Files changed

  • src/features/prompts/components/PromptPanel.tsx (+164 -151)
  • src/styles/prompts.css (+11 -0)

Testing

  • npm run typecheck
  • Manual testing: verified scrolling works with long prompt lists
  • Verified fixed header and search bar remain accessible while scrolling

Fixes the issue where the General Prompts panel could not be scrolled
when the prompt list exceeded the viewport height.

Changes:
- Add .prompt-panel-scroll container with overflow-y: auto
- Restructure layout: header (fixed) → search (fixed) → scroll (scrollable content)
- Move editor and prompt sections into scrollable container
- Add bottom padding for better visual experience when scrolled to bottom

Technical details:
- Follows the same scrolling pattern as diff.css and file-tree.css
- Uses flex: 1 + min-height: 0 + overflow-y: auto for proper flex scrolling
- Keeps header and search bar fixed at top for better UX
@Dimillian
Copy link
Owner

@codex review

@chatgpt-codex-connector
Copy link

Codex Review: Didn't find any major issues. Hooray!

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

@Dimillian Dimillian merged commit c7917cd into Dimillian:main Jan 21, 2026
gersmann pushed a commit to gersmann/codex-monitor-web that referenced this pull request Mar 10, 2026
…n#171)

Co-authored-by: kzheart <kzheartgyf@gmail.com>
Co-authored-by: Thomas Ricouard <ricouard77@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants