fix: HTML table text alignment issues

[Klakurka]

Description

All html tables across the site should have correct text-align styles on both the headers and data column

Test plan

View all pages, confirming that the text alignment looks good on each html table

Summary by CodeRabbit

• Style & Refactor
  • Standardized table header alignment across admin dashboards and transaction pages by replacing inline styles with consistent CSS utility classes.
  • Added reusable text-alignment utilities to improve code maintainability and visual consistency throughout the application.

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

[coderabbitai]

Walkthrough

This pull request refactors table header styling across multiple admin, dashboard, and transaction components by replacing inline CSS styles with utility CSS classes. Three new text-alignment utility classes (text-left, text-center, text-right) are added to the global stylesheet, and existing table components are updated to reference these classes instead of inline style attributes.

Changes

Cohort / File(s)	Summary
CSS Utility Classes styles/global.css	Added three new text-alignment utility classes: .text-left, .text-center, and .text-right for left, center, and right text alignment respectively.
Admin Components components/Admin/RegisteredUsers.tsx, components/Admin/SubscribedAddresses.tsx	Converted header and cell rendering to use text-center class for centered alignment of "Admin" and "View" column headers and content.
Dashboard & Transaction Components components/Dashboard/Leaderboard.tsx, components/Transaction/PaybuttonTransactions.tsx, pages/payments/index.tsx	Replaced inline textAlign styles with CSS utility classes across multiple table headers: text-right for right-aligned columns (Amount, Revenue, Payments) and text-center for centered columns (Network, TX).

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

The changes are highly homogeneous and follow a consistent pattern—straightforward replacement of inline styles with utility classes. All modifications are purely presentational with no logic, control flow, or behavioral changes. The new CSS classes are simple and standard text-alignment utilities.

Suggested reviewers

• lissavxo

Poem

🐰 Inline styles hop away,
Utility classes come to play,
Text aligned with grace and ease,
CSS utilities please,
One stylesheet to center them all! ✨

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description covers the main objectives and includes a test plan, but is missing the 'Related to #' issue reference field from the template, which is a required section.	Add the issue reference at the top of the description following the template format 'Related to #' to complete the required template structure.
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 (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: HTML table text alignment issues' directly and clearly summarizes the main change in the changeset, which involves fixing text alignment in HTML tables across multiple components and the global CSS file.

✨ 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 chore/html-table-text-alignment

---

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 (4)

components/Dashboard/Leaderboard.tsx (1)

38-53: Consider completing the refactoring for consistency.

The headers now use CSS utility classes, but the cell content (lines 43-45, 52) still uses inline style={{textAlign: 'right'}}. For consistency and maintainability, consider replacing these inline styles with the text-right class as well.

🔎 Suggested refactor to complete the migration

         Cell: (cellProps) => {
-          return <div style={{ textAlign: 'right', fontWeight: '600' }}>
+          return <div className="text-right" style={{ fontWeight: '600' }}>
             {'$'.concat(formatQuoteValue(cellProps.cell.value, currencyId))}
           </div>
         }

And for the Payments cell:

         Cell: (cellProps) => {
-          return <div style={{ textAlign: 'right', fontWeight: '600' }}>{cellProps.cell.value}</div>
+          return <div className="text-right" style={{ fontWeight: '600' }}>{cellProps.cell.value}</div>
         }

components/Transaction/PaybuttonTransactions.tsx (1)

88-100: Consider completing the refactoring for consistency.

The Amount header now uses the text-right class, but the cell content (line 92) still uses inline style={{textAlign: 'right'}}. For consistency, consider replacing this with the CSS utility class.

🔎 Suggested refactor

         Cell: (cellProps) => {
-          return <div style={{ textAlign: 'right', fontWeight: '600' }}>{parseFloat(cellProps.cell.value).toLocaleString(
+          return <div className="text-right" style={{ fontWeight: '600' }}>{parseFloat(cellProps.cell.value).toLocaleString(
             undefined,

pages/payments/index.tsx (2)

268-280: Consider completing the refactoring for consistency.

The Amount header now uses the text-right class, but the cell content (line 279) still uses inline style={{textAlign: 'right'}}. For consistency with the header styling approach, consider using the CSS utility class.

🔎 Suggested refactor

-          return <div style={{ textAlign: 'right', fontWeight: '600' }}>{formattedAmount}</div>
+          return <div className="text-right" style={{ fontWeight: '600' }}>{formattedAmount}</div>

---

283-289: Consider completing the refactoring for consistency.

Similar to the Amount column, the Value header uses text-right but the cell (line 288) still uses inline styling. Consider applying the same CSS class approach.

🔎 Suggested refactor

-          return <div style={{ textAlign: 'right', fontWeight: '600' }}> ${formatQuoteValue(cellProps.cell.value, user.userProfile.preferredCurrencyId)}</div>
+          return <div className="text-right" style={{ fontWeight: '600' }}> ${formatQuoteValue(cellProps.cell.value, user.userProfile.preferredCurrencyId)}</div>

📜 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 4f90a57.

📒 Files selected for processing (6)

• components/Admin/RegisteredUsers.tsx (1 hunks)
• components/Admin/SubscribedAddresses.tsx (1 hunks)
• components/Dashboard/Leaderboard.tsx (2 hunks)
• components/Transaction/PaybuttonTransactions.tsx (3 hunks)
• pages/payments/index.tsx (6 hunks)
• styles/global.css (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

components/Admin/RegisteredUsers.tsx (1)

services/userService.ts (1)

• UserWithSupertokens (21-24)

🔇 Additional comments (3)

styles/global.css (1)

197-207: LGTM! Well-structured utility classes.

The new text alignment utility classes follow a clear naming convention and will help standardize alignment styles across the application.

components/Admin/SubscribedAddresses.tsx (1)

30-30: LGTM! Consistent with existing cell styling.

The View header now uses the text-center class, which aligns well with the existing cell styling that uses the table-eye-ctn class (already defined with center alignment in global.css).

components/Admin/RegisteredUsers.tsx (1)

34-40: LGTM! Complete and consistent refactoring.

Excellent implementation - both the header and cell content use the text-center CSS class consistently. This represents the complete refactoring pattern that aligns with the PR objectives.