Fix Overflow Issue in Timer Pages for Smaller Mobile Devices

[c-o-d-e-y-o-d-a]

Description

This PR addresses the overflow problem occurring on smaller mobile devices, such as the Nexus 5, specifically in the Timer pages. The UI elements have been adjusted to ensure proper responsiveness and alignment, providing a seamless experience across devices with smaller screen sizes.

Proposed Changes

• Fixed layout constraints to prevent widget overflow.
• Updated padding and margins for better scalability.
• Verified compatibility with smaller screens like Nexus 5.

Fixes #(611)

Screenshots

On Nexus 5

gsoc.timer.issue.solvedd.mp4

On Samsung M21 2021 edition

Checklist

• [✔️] Tests have been added or updated to cover the changes
• [✔️] Documentation has been updated to reflect the changes
• [✔️] Code follows the established coding style guidelines
• [✔️] All tests are passing

[ganidande905]

Hey @c-o-d-e-y-o-d-a I've seen what you have done but the problem is, the height and width have been hardcoded in the timerview file
I think its better to just add mediaquery and then divide the width by 3 or set the width as screenwidth*0.2
Try doing it this way, I feel that is better
As I was working on another issue, I solved this issue too
I'll make a PR on this issue too, you can go through it and the maintainer could decide which ones good

[AryanSarafDev]

Nice Work @c-o-d-e-y-o-d-a . There are some conflicts in the pr. Can you resolve them? I will merge the pr after that.

[ganidande905]

@AryanSarafDev merging my Previous Pr solved this issue too that's the reason the code is facing conflicts
So you can close this
Thank you

[AryanSarafDev]

@ganidande905 Sure. @c-o-d-e-y-o-d-a can you check in the latest build that is something missing from your pr?