avinash201199 / avinash201199/stopwatch
Bug Report: UI Overlap in Stopwatch Page
- Dominant language
- CSS
- Stars
- 70
- Forks
- 185
- PR merge metrics
- No merged PRs in 30d
Description
### 🐞 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
Contributor guide
No contributing guide indexed for this repository
Research direction
Open the app at the Stop Watch section and reproduce the overlap at the reported 720x1604 Android Chrome viewport. Inspect the Stop Watch panel, background layer, and surrounding timer-option container styles for positioning, stacking, and spacing issues. Done means Pomodoro Timer, Custom Timer, and Countdown Timer remain visible and accessible without overlap.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100