bug: fix statCell animation of number rolling and alignment issues

[Abfa41]

Description

This PR fixes the animated stats counter shifting issue in the hero section. The NumberFlow counters were visually moving from left to right while updating from 0 to their target values due to dynamic text width expansion.

Changes made:

• Added a fixed width (w-[6ch]) to the stats number container
• Applied text-right alignment to anchor digits consistently
• Retained tabular-nums for equal-width digit rendering
• Improved the smooth rolling appearance of animated counters
• Prevented unwanted horizontal layout shifting during number updates

Related Issue

Fixes #888

Type of Change

• Bug Fix
• Feature
• Enhancement
• Documentation

Testing

Tested manually by:

1. Running the application locally
2. Navigating to the homepage hero section
3. Observing the animated stats counters during initial load
4. Verifying that the numbers now remain visually stable while animating

Screenshots/ScreenRecordings

• Before the Fix ( The number rolling animation is coming from left to right, making it look bad )
  https://github.com/user-attachments/assets/ad3b1904-5f26-4de9-8f77-aecb3c549862

• After the Fix ( The number rolling animation is coming properly and looking smooth )
  https://github.com/user-attachments/assets/85d3502a-f14b-4480-b3f9-87c9bfa47fac

Checklist

• Code follows project guidelines
• No new compile/type errors
• Tested manually (include steps above)
• No .env, credentials, or node_modules committed
• Docs updated (if needed)
• Screenshots/ScreenRecordings added for UI changes (if applicable)

Summary by CodeRabbit

• Style
  • Improved statistics display layout with centered alignment and better number formatting.
  • Enhanced numeric readability through fixed-width character constraints and right-alignment.

[github-actions]

Hi @Abfa41, thanks for contributing to InternHack! 🎉

I have automatically:

• 👤 Assigned this PR to you.
• 🏷️ Applied the gssoc:approved label.

Our workflows will now analyze your changes to classify:

• 📈 PR Difficulty: level:*
• 🧩 PR Type: type:*
• 🌟 PR Quality: quality:*

Tip

Ensure your PR description references the issue it resolves (e.g. Closes #123). This allows the bot to inherit any additional labels from that issue!

Happy coding! 🚀

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 02e3c9b5-9cdd-4353-addf-7fbb77eb65db

📥 Commits

Reviewing files that changed from the base of the PR and between 4cbe9ad and 33e2a9a.

📒 Files selected for processing (1)

• client/src/components/ui/shape-landing-hero.tsx

---

📝 Walkthrough

Walkthrough

The hero section's animated stats counters are corrected to eliminate horizontal text shifting during number updates. The StatCell layout is updated with centered flex-column alignment, fixed-width numeric display with right-alignment, and explicit tabular number formatting for stable digit spacing.

Changes

Stats Counter Layout Fix

Layer / File(s)	Summary
StatCell layout and number formatting client/src/components/ui/shape-landing-hero.tsx	The StatCell wrapper switches from left-aligned text to centered flex-column layout; the numeric display is constrained with fixed character width and right-aligned; NumberFlow receives explicit className="tabular-nums" to maintain equal digit spacing during animation.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested labels

enhancement, good first issue, level:beginner

Poem

A counter that danced left and right,
Now anchored in place, polished and tight.
With fixed width and tabular grace,
Numbers flow smooth without shifting pace.
🐰✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the bug fix for statCell animation and alignment issues, accurately representing the main change in the PR.
Description check	✅ Passed	The PR description comprehensively covers all required template sections including description, related issue, type of change, testing methodology, and media attachments.
Linked Issues check	✅ Passed	The PR successfully implements all proposed fixes from issue #888: fixed width (w-[6ch]), text-right alignment, tabular-nums retention, and prevents horizontal layout shifting.
Out of Scope Changes check	✅ Passed	All changes in the StatCell component are directly scoped to addressing the alignment and animation issues defined in issue #888, with no extraneous modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Abfa41]

@Sachinchaurasiya360 broh, Please review my Small PR and merge it bro. All the checks have been passed. You can refer the ScreenRecordings as well for better understanding. Thanks!

[Abfa41]

@Sachinchaurasiya360 broh, Please review my PR as early as possible and do let me know if any changes are required or not??