Bug fixed for text overlapping (small screen resolution)

[Telomelonia]

Description

Changed the grid pattern, margin, and grid-templete-rows to fix the overlapping of text that was occurring in small screen resolution.

resolves #199

Type of change

• [x] Bug fix (non-breaking change which fixes an issue).

Additional Context (Please include any Screenshots/gifs if relevant)

Checklist:

• [x] My code follows the style guidelines of this project.
• [x] I have performed a self-review of my own code.
• [x] I have made corresponding changes to the documentation.
• [x] I have added corresponding tests.
• [x] Any dependent changes have been merged and published in downstream modules.
• [x] I have signed the commit message to agree to Developer Certificate of Origin (DCO) (to certify that you wrote or otherwise have the right to submit your contribution to the project.) by adding "--signoff" to my git commit command.

[netlify[bot]]

✅ Deploy Preview for journal-policy-tracker-frontend ready!

Name	Link
🔨 Latest commit	b8316d60bdd1f4e91b77b6fcf3a80e45dccc0786
🔍 Latest deploy log	https://app.netlify.com/sites/journal-policy-tracker-frontend/deploys/6394fb6473026d0008ee9bbf
😎 Deploy Preview	https://deploy-preview-219--journal-policy-tracker-frontend.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify[bot]]

✅ Deploy Preview for legendary-faloodeh-5016fa ready!

Name	Link
🔨 Latest commit	b8316d60bdd1f4e91b77b6fcf3a80e45dccc0786
🔍 Latest deploy log	https://app.netlify.com/sites/legendary-faloodeh-5016fa/deploys/6394fb64671b00000932f602
😎 Deploy Preview	https://deploy-preview-219--legendary-faloodeh-5016fa.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.