avinash201199 / avinash201199/stopwatch

Bug Report: UI Overlap in Stopwatch Page

Open
#390 1 comment 0 reactions 0 assignees View on GitHub
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:**
![Screenshot_2025-10-28-16-46-59-74_40deb401b9ffe8e1df2f1cc5ba480b12.jpg](https://github.com/user-attachments/assets/980f634d-b839-4d3c-951a-b80081775656)

---

**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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.