fix: ApiDetailPage tabular-nums - #819
Open
giftlu09-lang wants to merge 1 commit into
Open
Conversation
Apply font-variant-numeric: tabular-nums to all numeric displays on ApiDetailPage so digits use fixed-width glyphs and the layout does not shift as values update (Issue CalloraOrg#466, GrantFox FWC26 Stellar Wave). Changes ------- src/styles/typography.css - Wrap all rules in @layer typography for correct cascade ordering. - Add defensive container rules for .stat-card__value, .api-detail-plan-price, and .api-detail-calculator-total__amount so every numeric descendant is covered even without an explicit class. src/pages/ApiDetailPage.tsx - Performance Metrics (Overview tab): add tabular-nums + stat-card__value to the value <div> inside each stat card (Total Requests, Latency P95, System Uptime). - Pricing tab / Standard plan: add tabular-nums to .api-detail-plan-price. - Cost Calculator: add tabular-nums + api-detail-calculator-total__amount to the Estimated Monthly Total amount element. - Pre-existing tabular-nums on hero price panel, hero meta price, and calculator monthly-volume span are left unchanged. src/pages/ApiDetailPage.test.tsx - Add describe('tabular-nums numeric display (Issue CalloraOrg#466)') with 13 tests covering all numeric elements: hero price panel, hero meta price, three performance metrics, standard plan price, monthly volume span, estimated total, and a slider-interaction regression test. No new runtime dependencies. No breaking changes. All 13 new tests pass; pre-existing test count and failures are unchanged.
|
@giftlu09-lang Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
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
1 participant
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.
Apply font-variant-numeric: tabular-nums to all numeric displays on ApiDetailPage so digits use fixed-width glyphs and the layout does not shift as values update (Issue #466, GrantFox FWC26 Stellar Wave).
Changes
src/styles/typography.css
src/pages/ApiDetailPage.tsx
src/pages/ApiDetailPage.test.tsx
No new runtime dependencies. No breaking changes. All 13 new tests pass; pre-existing test count and failures are unchanged.
closes #466