fix: external site hyperlink length

[Klakurka]

Description

In master, the hyperlinks on /button/ and /button/xxx extend across the entire div (100% width) which is unexpected especially since on /button/ the whole div is a link to the button details.

Test plan

Go to /button and /button/xxx, hoving over the external website hyperlinks making sure clicking far to the right of the actual link text doesn't take you to the website.

Summary by CodeRabbit

• Style
  • Improved layout and sizing of the Website link for more consistent display and better fit within cards.
  • Added a hover effect for links (subtle underline and reduced opacity) to improve discoverability and feedback.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Added a CSS class and hover style for the Website link in the PaybuttonDetail component; applied style.website_link to the anchor and added .website_link plus a hover rule in the component CSS. No logic or API changes.

Changes

Cohort / File(s)	Summary
Website link styling components/Paybutton/PaybuttonDetail.tsx, components/Paybutton/paybutton-detail.module.css	Applied style.website_link to the Website anchor; added .website_link { display: inline-flex; width: fit-content; max-width: 100%; align-self: flex-start; } and a hover rule .paybutton_card a:hover { text-decoration: underline; opacity: 0.85; }.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Small CSS addition and single JSX class application.
• Files to glance at: PaybuttonDetail.tsx for correct class usage and paybutton-detail.module.css for style correctness.

Possibly related PRs

• fix: Shortened addresses on Transaction html table at lower res #1085 — touches components/Paybutton/PaybuttonDetail.tsx; related UI/display edits to the same component.

Suggested labels

enhancement (UI/UX/feature)

Suggested reviewers

• lissavxo

Poem

🐰 I tweaked a link with gentle care,
A tiny class, a hover flair—
Now websites bounce with subtle light,
Aligned and tidy, snug and bright. ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: external site hyperlink length' directly describes the main change: fixing the issue where external hyperlinks were extending full-width across their container.
Description check	✅ Passed	The description covers the problem (full-width hyperlinks causing unexpected navigation), the context (conflict with page-level links), and a test plan for verification.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/long-website-hyperlink

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 933f82b and 24b0155.

📒 Files selected for processing (1)

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

🚧 Files skipped from review as they are similar to previous changes (1)

• components/Paybutton/paybutton-detail.module.css

⏰ 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

---

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.}