fix(ui): improve monitor list readability on mobile

[AnuragEkkati]

Summary

On mobile and tablet devices, heartbeat bars took up too much space (50% width), leaving insufficient room for monitor names and making the UI hard to use.

In this pull request, the following changes are made:

• Made the layout responsive so smaller screens show fewer heartbeat bars and more space for monitor names.

• Relates to Reduce the number of heartbeats shown on mobile #6669
• Resolves Reduce the number of heartbeats shown on mobile #6669

Please follow this checklist to avoid unnecessary back and forth (click to expand)

• ⚠️ If there are Breaking change (a fix or feature that alters existing functionality in a way that could cause issues) I have called them out
• 🧠 I have disclosed any use of LLMs/AI in this contribution and reviewed all generated content.
  I understand that I am responsible for and able to explain every line of code I submit.
• 🔍 Any UI changes adhere to visual style of this project.
• 🛠️ I have self-reviewed and self-tested my code to ensure it works as expected.
• 📝 I have commented my code, especially in hard-to-understand areas (e.g., using JSDoc for methods).
• 🤖 I added or updated automated tests where appropriate.
• 📄 Documentation updates are included (if applicable).
• 🧰 Dependency updates are listed and explained.
• ⚠️ CI passes and is green.

Screenshots for Visual Changes

Event	Before	After
iphone 14 pro max
iphone 12 pro
ipad Air
ipad mini
ipad pro
pixel 7
samsung galaxy A51/71
Desktop

[CommanderStorm]

Thank you! ❤️