Added vertical scrollbar to addresses list

[Klakurka]

Related to #1074

Description

Adds scrollbar on /button/xxx page for buttons that have a lot of addresses

Test plan

Visit a /button/xxx page for a button with lots of addresses and see the scrollbar in action. The page is a bit more manageable with this change

Summary by CodeRabbit

Release Notes

• Style
  • Copy button now appears inline within each address for quicker access
  • Address list now scrolls when displaying multiple addresses

[Copilot]

Pull Request Overview

This PR adds a vertical scrollbar to the addresses list on the button detail page to improve usability when buttons have many addresses.

Key Changes:

• Added a wrapper div with scrolling styles around the addresses list
• Implemented a CSS class with max-height and vertical scrolling

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
components/Paybutton/paybutton-detail.module.css	Added CSS class with max-height of 500px and vertical auto-overflow
components/Paybutton/PaybuttonDetail.tsx	Wrapped the addresses list with a div applying the new scrollable container class

---

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

[coderabbitai]

Walkthrough

The PayButton component's address display interface has been refactored. The copy button functionality is relocated from a standalone block to become inline within each individual address item. A container wrapper is introduced around the address list alongside new CSS styling for scrollable content.

Changes

Cohort / File(s)	Summary
Copy Button Restructuring components/Paybutton/PaybuttonDetail.tsx	Moves copy button from external block to inline placement within each address item container. Adds event handling with stopPropagation and preventDefault for the handleCopyClick action.
Styling Updates components/Paybutton/paybutton-detail.module.css	Introduces new .paybutton_detail_address CSS class with max-height constraint (500px) and vertical scrolling enabled (overflow-y: auto).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• Verify proper event handling within the inline copy button (stopPropagation and preventDefault work as intended)
• Confirm the container wrapper structure doesn't break existing address list functionality
• Validate CSS scrolling behavior integrates smoothly with the new container layout

Poem

🐰 A button moves from distant shore,
Now nestled close within each door,
Where addresses in scrolling dance,
Find copy at their finger's glance.
Hop, click, and share with ease!

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change—adding a vertical scrollbar to the addresses list—which is the primary modification across the modified files.
Description check	✅ Passed	The description includes the required sections (Related to, Description, and Test plan) with adequate detail about the change and testing approach, though the optional 'Depends on' section is empty.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/button-page-scrollbars

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

components/Paybutton/paybutton-detail.module.css (1)

87-90: Consider responsive design for smaller screens.

The fixed max-height: 500px works for desktop, but may consume excessive vertical space on mobile devices. Consider using viewport-relative units or media queries to adjust the height for smaller screens.

Apply this diff to add responsive behavior:

 .paybutton_detail_address {
-  max-height: 500px;
+  max-height: min(500px, 50vh);
   overflow-y: auto;
 }

Alternatively, use media queries for more granular control:

.paybutton_detail_address {
  max-height: 500px;
  overflow-y: auto;
}

@media (max-width: 960px) {
  .paybutton_detail_address {
    max-height: 300px;
  }
}

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between af72ccc and f7ef330.

📒 Files selected for processing (2)

• components/Paybutton/PaybuttonDetail.tsx (1 hunks)
• components/Paybutton/paybutton-detail.module.css (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Run Tests

🔇 Additional comments (1)

components/Paybutton/PaybuttonDetail.tsx (1)

59-84: Implementation looks good, achieves the PR objective.

The scrollable container is correctly implemented and the copy button is now properly integrated inline within each address item. The event handling with stopPropagation and preventDefault ensures the click doesn't trigger parent handlers.

Consider verifying keyboard accessibility: users navigating via keyboard should be able to scroll through the address list. Test with Tab/Shift+Tab navigation and ensure the scrollable area is accessible.