Keep the API value card one height so its header stops reflowing (1.3.2) - #95
Conversation
The Today / Yesterday / 30 days buttons jumped between rows on the Charts page. 1.3.1 moved the period-change label out of the ring's absolutely positioned centre and into normal flow, so the card grew by a line whenever a period had a change to report. Today and 30 days have one, Yesterday does not, and Tokens never does, which is exactly the pattern that was reported. That height change added and removed the page scrollbar, and losing the scrollbar widened the content by about 15px. The header wrapped below roughly 636px, so the switchers dropped onto a second row and popped back on the next toggle. The change label is now always rendered and reserves its line, so the card holds one height across every period and metric. The heading column also shrinks and wraps its own text first, which moves the header's wrap point down to about 540px and leaves it well clear of a scrollbar's worth of width. Prepares 1.3.2.
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
ceiling | 2d859f8 | Commit Preview URL Branch Preview URL |
Jul 21 2026, 11:14 AM |
📝 WalkthroughWalkthroughThe Charts API value cards now reserve space for period-change content and use stable flex sizing so headings wrap predictably without card-height or scrollbar shifts. Release metadata and changelog entries are updated for version 1.3.2. ChangesCharts layout and release
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 Checkov (3.3.8)apps/desktop-tauri/package.jsonTraceback (most recent call last): apps/desktop-tauri/src-tauri/tauri.conf.jsonTraceback (most recent call last): Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/desktop-tauri/src/components/TotalApiValueCard.tsx`:
- Around line 231-237: Ensure the reserved period-change slot renders in both
populated and no-data states of TotalApiValueCard, rather than only inside the
!model.isEmpty branch. Move the existing span into a wrapper shared by both
branches or add an equivalent empty slot to the no-data branch, preserving
consistent card height when switching periods, and add a regression test
covering that transition.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 0831aae5-84ad-4c46-bc4d-9bbf1ec34a65
⛔ Files ignored due to path filters (1)
Cargo.lockis excluded by!**/*.lock
📒 Files selected for processing (8)
CHANGELOG.mdapps/desktop-tauri/package.jsonapps/desktop-tauri/src-tauri/Cargo.tomlapps/desktop-tauri/src-tauri/tauri.conf.jsonapps/desktop-tauri/src/components/TotalApiValueCard.tsxapps/desktop-tauri/src/styles.cssrust/Cargo.tomlversion.env
| {/* Below the ring, not inside it: the change label collided with the | ||
| stroke once the total needed the full centre. */} | ||
| {periodChangeLabel && ( | ||
| <span className="api-value-card__period-change">{periodChangeLabel}</span> | ||
| )} | ||
| stroke once the total needed the full centre. Rendered even when | ||
| empty so the card keeps one height across periods and metrics — | ||
| a shrinking card toggled the scrollbar and reflowed the header. */} | ||
| <span className="api-value-card__period-change"> | ||
| {periodChangeLabel ?? ""} | ||
| </span> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Reserve the slot for empty periods too.
This span is still inside the !model.isEmpty branch. When a period has no provider data, the component renders only the status paragraph and skips the reserved slot, so switching between populated and empty periods can still change the card height. Move the slot into a wrapper shared by both branches, or render an equivalent empty slot in the no-data branch, and add a regression test for that transition.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/desktop-tauri/src/components/TotalApiValueCard.tsx` around lines 231 -
237, Ensure the reserved period-change slot renders in both populated and
no-data states of TotalApiValueCard, rather than only inside the !model.isEmpty
branch. Move the existing span into a wrapper shared by both branches or add an
equivalent empty slot to the no-data branch, preserving consistent card height
when switching periods, and add a regression test covering that transition.
1 participant
Fixes the Today / Yesterday / 30 days buttons jumping between rows on the Charts page.
Cause (introduced in 1.3.1)
1.3.1 moved the period-change label out of the ring's absolutely positioned centre into normal flow, so the card grows by a line whenever a period has a change to report. Today and 30 days have one, Yesterday does not, and Tokens never does — exactly the reported pattern.
That height change toggles the page scrollbar. Losing the scrollbar widens the content by ~15px, and the header wrapped below ~636px, so the switchers dropped to a second row and popped back on the next toggle.
Fix
flex: 1 1 180px; min-width: 0), moving the header's wrap point from ~636px down to ~540px — well clear of a scrollbar's worth of width.Verified
Measured against the real stylesheet and real markup headlessly:
Frontend 278 passed,
tsc --noEmitclean.Summary by CodeRabbit
Bug Fixes
Release