Skip to content

feat: monitor accordion fix and layout rearrangement (CPL-261)#298

Merged
GTC6244 merged 5 commits intomainfrom
feature/cpl-261-monitor-updates-2
Apr 17, 2026
Merged

feat: monitor accordion fix and layout rearrangement (CPL-261)#298
GTC6244 merged 5 commits intomainfrom
feature/cpl-261-monitor-updates-2

Conversation

@GTC6244
Copy link
Copy Markdown
Contributor

@GTC6244 GTC6244 commented Apr 16, 2026

Summary

Addresses CPL-261 — monitor dashboard UI fixes:

  • Fix accordion collapse/expand — All card sections now have clickable headers with chevron indicators that toggle collapse/expand via CSS transitions. Buttons inside headers (e.g., Refresh) use event.stopPropagation() so they don't trigger the accordion.
  • Rearrange layout — Moved "Supported Chain Config Keys", "Lit Action Client Configuration", and "Account Configuration Contract" from the left column to the right column, per the ticket's requested layout changes.

New layout:

  • Left: Payer Health, Server Version, Lit Node Express Configuration
  • Right: Supported Chain Config Keys, Lit Action Client Config, Account Configuration Contract, Node Configuration, Api Payer Accounts

Test plan

  • Verify each card section can be collapsed and expanded by clicking its header
  • Verify Refresh buttons inside card headers work without toggling the accordion
  • Verify the layout matches: left column has 3 cards, right column has 5 cards
  • Verify data still loads correctly in all sections after the layout rearrangement

🤖 Generated with Claude Code

Add collapsible accordion behavior to all card sections in the monitor
dashboard. Move Supported Chain Config Keys, Lit Action Client
Configuration, and Account Configuration Contract to the right column.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds an accordion-style collapse/expand interaction to monitor dashboard cards and rearranges the two-column layout per CPL-261.

Changes:

  • Introduces accordion CSS and per-card header/body structure with chevron indicators.
  • Updates card markup so headers toggle collapse/expand and refresh buttons stop event propagation.
  • Reorders cards between left/right columns to match the requested layout.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread lit-static/dapps/monitor/index.html Outdated
Comment thread lit-static/dapps/monitor/index.html Outdated
Comment thread lit-static/dapps/monitor/index.html
Comment thread lit-static/dapps/monitor/index.html
Comment thread lit-static/dapps/monitor/index.html Outdated
Comment thread lit-static/dapps/monitor/index.html
GTC6244 and others added 4 commits April 17, 2026 11:19
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…on (CPL-261)

Addresses remaining Copilot review feedback:
- Replace hardcoded max-height:2000px with dynamic scrollHeight measurement
- Add keyboard support (Enter/Space) via role=button, tabindex, aria-expanded
- Add :focus-visible outline on card headers
- Replace inline onclick with delegated listener using data-accordion
- Drop event.stopPropagation on Refresh buttons (delegation skips buttons)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@GTC6244 GTC6244 merged commit 09fef17 into main Apr 17, 2026
22 checks passed
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