Skip to content

feat(icp): Make ICP details only scrollable - #22

Merged
Rishavraaj merged 1 commit into
mainfrom
fix/icp-detail-scrollable-panel
Aug 3, 2026
Merged

feat(icp): Make ICP details only scrollable#22
Rishavraaj merged 1 commit into
mainfrom
fix/icp-detail-scrollable-panel

Conversation

@anujeet98

Copy link
Copy Markdown
Member

Summary

  • Fixes UX bug where a long ICP Notes entry caused the entire ICP detail page to scroll, dragging the header, tabs, and filters sidebar out of view.
  • The tab-content row is now bound to the viewport height; the Notes/tab-content column and the filters sidebar each scroll independently within their own bounded box.
  • The page header (breadcrumb, title, tabs) and the "Notes" sub-label stay pinned in view via sticky positioning while content scrolls beneath them.

Changes

  • Frontend (apps/web/src/components/Icp/IcpDetail.tsx):
    • Wrapped the header block in a shrink-0 flex child above a min-h-0 flex-1 content row, with the notes column and filters sidebar each set to self-stretch overflow-y-auto.
    • Made the DetailsPanel's "Notes" label + saving indicator sticky top-0 within the scroll container.
    • Reserved a left-side gutter (-ml-20/pl-20) on the scrollable notes column so EditorJS's block toolbar (+/drag-handle icons, which render slightly outside the block's own box) isn't clipped by the new overflow container.

Test plan

  • Verified via Playwright against the local dev server: typed 40+ lines of notes, confirmed window.scrollY stays 0 (no page-level scroll) while the inner container's scrollTop moves.
  • Confirmed header, tabs, and filters sidebar remain visible/fixed while notes content scrolls.
  • Confirmed the "Notes" label stays pinned above the scrolling editor content.
  • Confirmed EditorJS's +/drag-handle toolbar renders fully (not clipped) and is clickable after the scroll-container change.
  • tsc --noEmit passes with no errors in the changed file.

🤖 Generated with Claude Code

The ICP detail page previously relied on whole-document scroll, so long
Notes content dragged the header, tabs, and filters sidebar out of view.
Bound the tab-content row to the viewport height and give the notes
column and filters sidebar their own independent overflow-y-auto scroll,
with the header and the "Notes" label pinned via sticky positioning.

Also reserves a left-side gutter (-ml-20/pl-20) on the scrollable column
so EditorJS's block toolbar (+/drag-handle icons, which render slightly
outside the block's own box) isn't clipped by the new overflow container.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@anujeet98 anujeet98 changed the title Make only details panel scrollable in ICP detail view feat(icp): Make ICP details only scrollable Aug 3, 2026
@Rishavraaj
Rishavraaj merged commit b18b529 into main Aug 3, 2026
1 check passed
@Rishavraaj
Rishavraaj deleted the fix/icp-detail-scrollable-panel branch August 3, 2026 09:11
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