feat: add condensed view for PaymentHistoryTable and PendingClaimsTable#166
Merged
garrity-miepub merged 2 commits intomainfrom Apr 8, 2026
Merged
feat: add condensed view for PaymentHistoryTable and PendingClaimsTable#166garrity-miepub merged 2 commits intomainfrom
garrity-miepub merged 2 commits intomainfrom
Conversation
Contributor
garrity-miepub
commented
Apr 8, 2026
garrity-miepub
commented
- PaymentHistoryTable: 4 data-slots (payment-history, payment-history-empty, payment-history-table, payment-history-row) with condensed CSS for table headers, rows, badges, method icons, and refund buttons
- PendingClaimsTable: 6 data-slots (pending-claims, pending-claims-empty, pending-claims-table, pending-claims-row, pending-claims-cards, pending-claims-card) with condensed CSS for desktop table and mobile cards
- All selectors use structural patterns (no Tailwind class selectors)
- PaymentHistoryTable: 4 data-slots (payment-history, payment-history-empty, payment-history-table, payment-history-row) with condensed CSS for table headers, rows, badges, method icons, and refund buttons - PendingClaimsTable: 6 data-slots (pending-claims, pending-claims-empty, pending-claims-table, pending-claims-row, pending-claims-cards, pending-claims-card) with condensed CSS for desktop table and mobile cards - All selectors use structural patterns (no Tailwind class selectors)
Deploying ui with
|
| Latest commit: |
a871def
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://d6bf5439.ui-6d0.pages.dev |
| Branch Preview URL: | https://feature-condensed-view-table.ui-6d0.pages.dev |
There was a problem hiding this comment.
Pull request overview
Adds “condensed view” styling hooks and CSS overrides for PaymentHistoryTable and PendingClaimsTable by introducing data-slot attributes and defining condensed-mode CSS rules targeting those structural selectors.
Changes:
- Added
data-slotattributes throughoutPaymentHistoryTableandPendingClaimsTable(loading, empty, and rendered states) to support structural CSS targeting. - Added condensed-mode CSS overrides for
PaymentHistoryTabletable/rows/badges/method icons/refund button. - Added condensed-mode CSS overrides for
PendingClaimsTable(desktop table + mobile cards).
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/styles/condensed-view.css | Adds condensed-mode overrides for payment history and pending claims layouts using data-slot selectors. |
| src/components/PendingClaimsTable/PendingClaimsTable.tsx | Adds data-slot attributes to table/card containers and key elements for condensed CSS targeting. |
| src/components/PaymentHistoryTable/PaymentHistoryTable.tsx | Adds data-slot attributes to table container, empty state, and row elements for condensed CSS targeting. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Narrow claimant cell gap selector from 'td > div' to 'td:first-child > div' - Target inner div for mobile info row font-size instead of relying on inheritance
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.