fix: improved account page layout

[Klakurka]

Description

Made the /account page layout much nicer

Test plan

Go to /account and checkout the new layer. Contrast it with prod if you want.

Summary by CodeRabbit

• New Features

  • Account page redesigned into a two-column layout separating general settings from Pro and Organization panels.
  • Account Limits section updated with clearer headers, a labeled column and reordered rows for improved readability.

• Style

  • New section header styling for clearer hierarchy.
  • Removed fixed max-width constraints and added responsive layout scaffolding for more flexible, wide-view layouts.

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

[coderabbitai]

Walkthrough

Reorganizes Account and Organization layouts: removes fixed max-widths, introduces a responsive two-column Account layout, adjusts heading levels (h3 → h4), and restructures the ProDisplay table (new headers, spacer row, re-positioned rows, and Infinity → "Unlimited" display).

Changes

Cohort / File(s)	Summary
ProDisplay Component components/Account/ProDisplay.tsx	Replaced h3 with h4; swapped container class to paybutton-table-ctn; added an "Account Limits" header and a header spacer row; relabeled a header cell; moved/added the "Addresses Per Button" row; show Infinity as "Unlimited".
Account Component Styling components/Account/account.module.css	Removed max-width: 700px from .pro_ctn; added .section_header with margin and font-weight.
Account Page Layout & Styling pages/account/index.tsx, pages/account/account.module.css	index.tsx: changed null-check user !== null → user != null; introduced .account_columns and .account_column two-column layout; added "General" section header; moved ProDisplay and ViewOrganization into right column. account.module.css: added responsive column styles and .section_header; removed max-width on account_card; removed .public_key_info_ctn table-specific styles.
Organization Components components/Organization/ViewOrganization.tsx, components/Organization/organization.module.css	ViewOrganization.tsx: changed h3 → h4. organization.module.css: removed max-width: 700px from .org_ctn.
Manifest package.json	Present in manifest block (no functional changes described).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

• lissavxo

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: improved account page layout' directly and clearly describes the main change—a layout improvement to the account page.
Description check	✅ Passed	The description is minimal but adequate; it includes a brief explanation and a test plan, though lacking detail on what specifically changed and why.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/account-page-layout

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4e1d581 and 73c6806.

📒 Files selected for processing (1)

• pages/account/account.module.css

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

• pages/account/account.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.}

[coderabbitai]

Actionable comments posted: 2

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a1a64e6 and 84a5aac.

📒 Files selected for processing (6)

• components/Account/ProDisplay.tsx (2 hunks)
• components/Account/account.module.css (1 hunks)
• components/Organization/ViewOrganization.tsx (1 hunks)
• components/Organization/organization.module.css (0 hunks)
• pages/account/account.module.css (1 hunks)
• pages/account/index.tsx (2 hunks)

💤 Files with no reviewable changes (1)

• components/Organization/organization.module.css

🧰 Additional context used

🧬 Code graph analysis (1)

pages/account/index.tsx (1)

components/Organization/index.tsx (1)

• ViewOrganization (10-10)

⏰ 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 (8)

components/Account/account.module.css (1)

77-80: LGTM!

The new section header styling is clean and appropriate for the layout updates.

pages/account/index.tsx (1)

195-201: LGTM! Div structure is correctly nested.

The closing divs properly support the two-column layout. The right column appropriately contains the ProDisplay and ViewOrganization components.

pages/account/account.module.css (2)

7-28: LGTM! Solid responsive two-column implementation.

The mobile-first responsive layout is well-structured:

• Stacks vertically on mobile with 20px gap
• Switches to equal-width columns at 1200px
• min-width: 0 prevents flex overflow issues
• align-items: flex-start ensures proper alignment

---

25-33: LGTM! Clean column and header styling.

The .account_column and .section_header styles are appropriate and well-defined.

components/Account/ProDisplay.tsx (4)

11-13: LGTM! Improved handling of infinite limits.

The updated logic correctly handles both string 'Inf' and numeric Infinity representations.

---

38-38: LGTM! Consistent heading level with other sections.

The h4 heading with section_header class aligns with the "General" and "Organization" sections, maintaining visual consistency across the account page.

---

65-69: LGTM! Logical table row ordering.

The "Addresses Per Button" row is positioned appropriately after the messaging-related limits.

---

46-52: Good accessibility improvement with descriptive table header.

Adding "Account Limits" as the first column header improves table semantics and accessibility. The header-spacer row provides visual spacing and the class is properly defined in global styles.

[lissavxo]

Change the Organization section title font to match the other titles; the Organization title is thinner