Bug Report: UI Overlap in Stopwatch Page

[Hemanth-2OOT]

🐞 Bug Report: UI Overlap in Stopwatch Page

Description:
On the Stop Watch page, the top panel overlaps with the rest of the content (Pomodoro Timer, Custom Timer, Countdown Timer).
The “Stop Watch” button and background layer appear misaligned or not properly constrained, hiding some interactive elements behind it.

---

Steps to Reproduce:

1. Open the app and navigate to the Stop Watch section.
2. Observe the top yellow “STOP WATCH” button and toggle options.
3. Notice that the white overlay partially hides the “Pomodoro Timer” and “Custom Timer” buttons.

---

Expected Behavior:
Each timer option should be clearly visible and accessible without overlapping.
The “Stop Watch” panel should stay within its designated container area.

---

Actual Behavior:
The upper white section overlaps lower UI components, blocking interaction and making them appear faded or disabled.

---

Screenshot:

---

Possible Cause:

• Incorrect z-index or positioning (absolute / fixed) on the Stop Watch container.
• Missing margin or padding for layout separation.
• CSS stacking context issue in the parent div.

---

Device Info:

• Device: Android (e.g., Realme / Vivo)
• Browser: Chrome Mobile
• Screen Size: 720x1604
• App Version / Build: (Add version if known)

---

Suggested Fix:

• Review container stacking using position: relative and adjust z-index values.
• Add adequate padding/margin between sections.
• Verify responsiveness and layout consistency across mobile screen sizes.

---

Priority: 🟡 Medium
Status: ⏳ Open

[pArv-2029]

Hi @avinash201199 , I'd like to work on this bug fix for HacktoberFest . Could you please assign it to me ?