AOSSIE-Org / AOSSIE-Org/DebateAI
[BUG]: Match Logs panel background doesn't cover full content — cuts off partway down
- Ngôn ngữ chính
- TypeScript
- Star
- 84
- Fork
- 198
- Merge trung bình
- 2 ngày 19 giờ
- Pull request đã merge (30 ngày)
- 30
Mô tả
### 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
Hướng dẫn đóng góp
Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này
Hướng nghiên cứu
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.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- react, tailwindcss, typescript
- Lĩnh vực
- frontend
- Loại issue
- Lỗi
- Độ khó
- 1/5
- Thời gian dự kiến
- Dưới một giờ
- Mức độ hoạt động
- Sôi nổi
- Độ rõ ràng
- Đặc tả rõ ràng
- Mức phù hợp với người mới
- 90/100