AOSSIE-Org / AOSSIE-Org/DebateAI
[BUG]: Match Logs panel background doesn't cover full content — cuts off partway down
- Dominant language
- TypeScript
- Stars
- 84
- Forks
- 198
- Avg merge
- 2d 19h
- Merged PRs (30d)
- 30
Description
### Bug Description
On the tournament bracket page (`/tournament/:id/bracket`), the "Match Logs" panel's background does not cover its full content. The background cuts off partway down and the remaining match-log cards show the page background behind them, leaving a visible hard edge.
**Root cause** — a height mismatch in `frontend/src/Pages/MatchLogs.tsx`:
- The outer container (line ~130) carries the background but has a fixed height:
`bg-background h-[calc(100vh-350px)]`
- The inner scroll area (line ~132) is allowed to be taller:
`max-h-[calc(100vh-250px)] overflow-y-auto`
The inner content can grow up to `100vh-250px`, which is 100px taller than the `100vh-350px` background. That extra ~100px of content overflows past the background and exposes the page behind it.
Verified across themes: visible in High Contrast (starkest — pure black vs. lighter page), visible but subtle in Dark (dark-on-dark), and effectively invisible in Light only because the page and panel backgrounds are both near-white. This confirms it's a layout/height bug, not a theme bug.
### Steps to Reproduce
1. Navigate to a tournament bracket page, e.g. `http://localhost:5173/tournament/1/bracket`.
2. Switch the theme to High Contrast (makes it most visible; also present in Dark).
3. Look at the "Match Logs" panel on the right, with enough match entries to fill it.
4. Observe the panel background stops partway down (around the first card), and the cards below sit on the lighter page background — a visible hard edge.
### Logs and Screenshots
frontend/src/Pages/MatchLogs.tsx:
Line ~130 (outer — has background, shorter fixed height):
Line ~132 (inner — scrollable, taller max height):
The background (100vh-350px) is 100px shorter than the inner content's max height (100vh-250px), so overflow shows the page background behind it.
Suggested fix (either approach):
- Remove the fixed height on the outer container so it wraps its content:
(keeping the inner scroll area as-is), OR
- Make the two heights consistent so the background always covers the scroll area.
### Environment Details
- Page: /tournament/:id/bracket — Match Logs panel
- File: frontend/src/Pages/MatchLogs.tsx (lines ~130 and ~132)
- Frontend: Vite + React + Tailwind
- Branch: main
- Most visible in High Contrast; present in Dark; masked in Light (near-white on near-white). Root cause is theme-independent.
### Impact
Low - Minor inconvenience
### Code of Conduct
- [x] I have joined the [Discord server](https://discord.gg/hjUhu33uAn) and will post updates there
- [x] I have searched existing issues to avoid duplicates
Contributor guide
No contributing guide indexed for this repository
Research direction
Open frontend/src/Pages/MatchLogs.tsx around lines 130-132 and inspect the outer background container alongside the inner scroll area. Reproduce the issue at /tournament/:id/bracket with enough match entries, especially in High Contrast or Dark mode. Done means the panel background covers all visible match-log content without a hard edge in each theme.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, tailwindcss, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 90/100