test(code-block-responsive-breakpoints): verify Responsive Multi-device Columns & Mobile Viewport Layouts

[tamilr0727-ux]

Description

Adds responsive layout and mobile breakpoint test coverage for app/documentation/code-block.tsx through the new test file app/documentation/code-block.responsive-breakpoints.test.tsx.

Changes

• Added tests simulating mobile viewport widths (e.g., 375px) to validate responsive rendering behavior.
• Verified layout elements reflow into vertically stacked structures on smaller screens.
• Confirmed styling avoids fixed widths that could introduce horizontal scrolling.
• Tested that navigation and interactive controls scale appropriately across mobile breakpoints.
• Validated mobile-specific toggle states respond correctly to user interactions.

Test Coverage

Implemented 5 test cases covering:

1. Responsive rendering under a mocked 375px mobile viewport.
2. Column reflow into standard vertical flex layouts on smaller screens.
3. Prevention of absolute-width styling that could cause horizontal scrollbars.
4. Graceful scaling of navigation and interactive UI elements across mobile breakpoints.
5. Correct behavior of mobile-specific toggle states during user interaction.

Validation

• All tests pass successfully with vitest run.
• Responsive behavior is verified using mocked viewport configurations.
• No production code changes required.
• Improves confidence that the component renders consistently across mobile devices without layout regressions.

Verification

✅ vitest run passes successfully.

Fixes #6904

Pillar

• 🎨 Pillar 1 — New Theme Design
• 📐 Pillar 2 — Geometric SVG Improvement
• 🕐 Pillar 3 — Timezone Logic Optimization
• 🛠️ Other (Bug fix, refactoring, docs)

Visual Preview

Can Check in the Files Changed Section.

Checklist before requesting a review:

• I have read the CONTRIBUTING.md file.
• I have tested these changes locally (localhost:3000/api/streak?user=YOUR_USERNAME).
• I have run npm run format and npm run lint locally and resolved all errors (CI will fail otherwise).
• My commits follow the Conventional Commits format (e.g., feat(themes): ..., fix(calculate): ...).
• I have updated README.md if I added a new theme or URL parameter.
• I have started the repo.
• I have made sure that i have only one commit to merge in this PR.
• The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts).
• (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.

[github-actions]

👋 Hey @tamilr0727-ux! Thanks for your contribution! 🎉

Unfortunately, this PR has been automatically closed because it is not linked to any open issue.

To resolve this, please do the following:

1. Link a valid open issue by editing your PR description to include a closing keyword (e.g., Fixes #<issue-number>).
2. Reopen this PR once the link is added.

💡 You can link multiple issues if needed (e.g. Fixes #12, Closes #34).
If you're working on something that doesn't have an issue yet, please open one first and then link it here.

We look forward to reviewing your PR once an issue is linked! 🚀

[tamilr0727-ux]

/reopen