Fix: dark mode flicker and overflow issue

[sandeeprudola]

🛠️ Fix: Dark Mode Flicker and Overflow Issue
🔗 Related Issue
Fixes #499

✨ Summary
This PR fixes UI/UX issues related to:

🌓 Dark Mode Toggle: Removed flicker and improved transition animation
📏 Layout Overflow: Adjusted layout to prevent unwanted scroll/overflow behavior.

🧪 How to Test
Run the app locally (npm run dev)
Toggle between Dark and Light mode — the flicker should be gone
Check the layout for overflow or scroll inconsistencies

✅ Checklist
Verified build — npm run build successful
Passed linting — npm run lint:ts
Code formatted — npm run format
Verified UI on both light/dark modes

💬 Additional Notes
Follows TypeScript conventions and linting rules
Commit message uses Conventional Commits format (fix(ui): ...)
Changes are scoped and do not affect unrelated components

[github-actions]

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• Code formatting issues detected

How to fix:

Platform	Command	Description
🐧 Unix/macOS/Linux	npm run format	Auto-fix all formatting issues
🪟 Windows	npm run format:file <filename>	Fix specific files
🔍 Check Only	npm run format:check	Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.

---

🛠️ Next Steps

1. Fix the issues mentioned above
2. Test locally to ensure everything works
3. Push your fixes to this branch
4. Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits

[github-actions]

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• Code formatting issues detected

How to fix:

Platform	Command	Description
🐧 Unix/macOS/Linux	npm run format	Auto-fix all formatting issues
🪟 Windows	npm run format:file <filename>	Fix specific files
🔍 Check Only	npm run format:check	Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.

---

🛠️ Next Steps

1. Fix the issues mentioned above
2. Test locally to ensure everything works
3. Push your fixes to this branch
4. Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits

[jagpreetrahi]

Hey @sandeeprudola , i would like to suggest a solution to pass all the checks of this PR.

Issue related to prettier formatting checks.

So you have to fix the following files
src/App.tsx

src/components/shared/DarkModeToggle.tsx
src/pages/News/NewsPage.tsx

Or directly run the prettier command
with --write to fix.

[sandeeprudola]

hey @jagpreetrahi I have fixed the linting issues on the next pr #527 this pr have all the check passed, thanks for the concern