fix: address & hash max-width in sidebars

[bpierre]

Greptile Overview

Greptile Summary

This PR fixes max-width CSS values for addresses and hashes displayed in sidebar cards to ensure proper text wrapping.

Changes made:

• Address displays (42 chars): Changed from max-w-[22ch] to max-w-[21ch] for correct 2-line wrapping (42 ÷ 2 = 21)
• Transaction hash (66 chars): Changed from max-w-[23ch] to max-w-[22ch] for correct 3-line wrapping (66 ÷ 3 = 22)
• Block card alignment: Adjusted font size (14px → 15px), tracking (added 1px), gap spacing (8px → 12px), and block number padding (14 → 15 digits) to ensure block hash and block number have matching visual widths

The calculations are mathematically correct and the changes are consistently applied across all relevant components (AccountCard, TxTransactionCard, BlockCard) and routes (demo/address, token/$address).

Impact: Purely cosmetic CSS adjustments that improve visual consistency. No functional logic changes.

Confidence Score: 5/5

• This PR is safe to merge with no risk
• All changes are purely CSS adjustments with correct mathematical calculations (42÷2=21ch, 66÷3=22ch). No JavaScript logic was modified, no edge cases exist for static styling values, and changes are consistently applied across all affected components.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
apps/explorer/src/comps/AccountCard.tsx	5/5	Updated address max-width from 22ch to 21ch for proper 2-line wrapping (42 chars / 2 = 21ch)
apps/explorer/src/comps/TxTransactionCard.tsx	5/5	Updated transaction hash max-width from 23ch to 22ch for proper 3-line wrapping (66 chars / 3 = 22ch)
apps/explorer/src/comps/BlockCard.tsx	5/5	Adjusted font size (14px to 15px), tracking (1px), gap (8px to 12px), and block number padding (14 to 15 digits) to align block hash and number widths
apps/explorer/src/routes/_layout/demo/address.tsx	5/5	Updated address max-width from 22ch to 21ch to match AccountCard component
apps/explorer/src/routes/_layout/token/$address.tsx	5/5	Updated address max-width from 22ch to 21ch to match AccountCard component

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant Component
    participant CSS

    User->>Browser: Navigate to page with sidebar
    Browser->>Component: Render AccountCard/TxTransactionCard/BlockCard
    Component->>CSS: Apply max-width styling
    
    Note over CSS: Before PR:<br/>Address: max-w-[22ch]<br/>Tx Hash: max-w-[23ch]
    
    CSS-->>Component: Text wraps incorrectly
    Component-->>Browser: Display with improper alignment
    
    Note over Component,CSS: PR Changes Applied
    
    Component->>CSS: Apply corrected max-width
    
    Note over CSS: After PR:<br/>Address: max-w-[21ch] (42÷2=21)<br/>Tx Hash: max-w-[22ch] (66÷3=22)<br/>Block: 15px font + tracking
    
    CSS-->>Component: Text wraps at correct width
    Component-->>Browser: Display with proper alignment
    Browser-->>User: Show correctly formatted sidebar

Loading

[github-actions]

🚀 Deploying bpierre/fix-ui-tweaks with ⚡ Cloudflare Pages

Latest commit:	5f4f3aca1af2ec5d4aaa566fdf815b0c520570d7
Status:	✅ Deploy successful
Preview URL:	https://74916652-explorer.porto.workers.dev
Branch Preview URL:

[greptile-apps]

_{No files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}