Fix statistics card overflow with compact layout and abbreviated numbers#1791
Fix statistics card overflow with compact layout and abbreviated numbers#1791ToriChanIntegration wants to merge 6 commits into
Conversation
Add a visually-hidden email input with autocomplete="username" inside the password form (step 2) so browsers and password managers can correctly associate the saved password with the user's email address. Uses opacity+absolute positioning instead of display:none so the input is still detectable by browser autofill engines while remaining invisible to the user. Also moved the email display <p> inside the password form and added it to the SSO path to keep parity. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Screenshots showing the original bug and two proposed fix approaches for GitHub issue Cap-go#1790 (statistics card overflow). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add overflow-hidden to ChartCard container to prevent content escaping - Make total value font responsive (text-2xl → text-3xl on sm+) - Compact legend row: smaller icons, tighter gaps, text-xs, nowrap - Abbreviate large numbers in legend (e.g. 24,206 → 24.2K) - Full aria-labels preserved for accessibility Fixes Cap-go#1790 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 2f5168b14e
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| if (value >= 1_000_000) | ||
| return `${(value / 1_000_000).toFixed(1).replace(/\.0$/, '')}M` | ||
| if (value >= 1_000) | ||
| return `${(value / 1_000).toFixed(1).replace(/\.0$/, '')}K` |
There was a problem hiding this comment.
The new formatter rounds after choosing the unit, so values near thresholds are displayed incorrectly (for example, 999_950 becomes 1000K instead of 1M, and similarly near the billion boundary). Since these values are user-facing totals in the dashboard legend, this introduces visible numeric inaccuracies for real production data spikes; the unit should be selected after rounding or by using a compact formatter that handles rollover.
Useful? React with 👍 / 👎.
📝 WalkthroughWalkthroughThese changes address layout overflow issues in dashboard components by adding width constraints and adjusting typography sizing, introduce compact number formatting for statistics display, and restructure the login form to support browser autofill with a hidden email input field. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~15 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/pages/login.vue (1)
595-604: Consider using Tailwind'ssr-onlyclass instead of inline styles.While the inline style approach works, Tailwind provides an
sr-onlyutility that achieves similar visual hiding. However, for browser autofill detection, the current approach with explicit positioning may be more reliable across browsers, so this is optional.♻️ Optional: Use Tailwind utility classes
<input type="email" :value="emailForLogin" name="username" autocomplete="username" readonly tabindex="-1" aria-hidden="true" - style="position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none;" + class="absolute w-px h-px opacity-0 overflow-hidden pointer-events-none" >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/login.vue` around lines 595 - 604, Replace the inline visually-hidden styles on the login email input with Tailwind's sr-only utility: locate the input element bound to emailForLogin (name="username", readonly, tabindex="-1", aria-hidden="true") and remove the long style attribute, adding class="sr-only" instead so the field remains hidden but accessible; keep existing attributes (readonly, tabindex, aria-hidden) to preserve behavior and autofill handling, and only switch to sr-only if autofill behavior remains acceptable across target browsers.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/pages/login.vue`:
- Around line 595-604: Replace the inline visually-hidden styles on the login
email input with Tailwind's sr-only utility: locate the input element bound to
emailForLogin (name="username", readonly, tabindex="-1", aria-hidden="true") and
remove the long style attribute, adding class="sr-only" instead so the field
remains hidden but accessible; keep existing attributes (readonly, tabindex,
aria-hidden) to preserve behavior and autofill handling, and only switch to
sr-only if autofill behavior remains acceptable across target browsers.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 103872ee-ccf2-4469-9d48-d54b317153e9
⛔ Files ignored due to path filters (3)
dashboard-approach1.pngis excluded by!**/*.pngdashboard-approach2.pngis excluded by!**/*.pngdashboard-original-broken.pngis excluded by!**/*.png
📒 Files selected for processing (3)
src/components/dashboard/ChartCard.vuesrc/components/dashboard/UpdateStatsCard.vuesrc/pages/login.vue
|
|
Thanks for the contribution. We’re closing this PR because we can’t accept repository changes in this form from an integration-style / automated contributor account. For Capgo repos, we expect contributions to be tightly scoped, manually validated, and submitted by an identifiable contributor who can clearly explain the problem, why this approach fits the project, and what was verified locally. Large or bulk-generated change sets without that ownership context create too much review and maintenance risk for us. If this was opened in error or if you are a real contributor behind this account, you’re welcome to resubmit a smaller, clearly-scoped PR with manual validation notes and repository-specific reasoning. |
2 participants
Summary
25,298), evolution badge (+72.94%), and legend row were getting clipped/escaping the card boundaryoverflow-hiddento ChartCard container, responsive font sizing on total valuetext-xs, andwhitespace-nowrap24,206→24.2K) while preserving full counts in aria-labels for accessibilityFixes #1790
Test plan
X.XK, ≥1M asX.XM)🤖 Generated with Claude Code
Summary by CodeRabbit
Bug Fixes
Style