bytedance / bytedance/agentkit-samples
Voiceover review page overflows narrow viewports
- Dominant language
- Python
- Stars
- 454
- Forks
- 96
- PR merge metrics
- No merged PRs in 30d
Description
### Description
The voiceover editing review page cannot fit a mobile viewport and has no responsive breakpoint for its three-column layout.
In `skills/byted-mediakit-voiceover-editing/templates/review-page/index.html`:
- `.left-panel` is fixed at 360px.
- `.right-panel` is fixed at 360px.
- `.center-panel` has `min-width: 640px`.
- No `@media` rule adapts or stacks these panels.
### Reproduction
At commit `0890278a6571e4190c1ab8cacd9becc147f74d9c`, serve the tracked template locally and inspect it at a 390px-wide viewport. Browser DOM measurement produced:
```text
document.documentElement.clientWidth = 390
document.documentElement.scrollWidth = 1098
```
The timeline/review controls extend well beyond the viewport and the right-side editing controls are off-screen. At a 1280px desktop viewport the three-column layout renders as intended, so this is specifically the missing responsive state rather than a general parse/render failure.
### Expected behavior
At narrow viewport widths, the page should stack, collapse, or otherwise resize its panels so the review controls remain reachable without a page-wide horizontal canvas.
### Impact
Users opening the generated review page on a phone or narrow embedded browser cannot reliably inspect and edit the voiceover result because primary controls are clipped/off-screen.
### Duplicate check
Open/closed issues, all PR states, the template's commit history, and responsive/mobile/overflow terms were searched. No equivalent report or active fix was found.
### Why there is no PR in this audit
This template has no frontend test/build harness or documented mobile interaction design. Choosing which panel should collapse, how the video/timeline should resize, and how the editing controls should be exposed on mobile requires a UX decision and browser validation against real rendered review data, which is not available on the Windows audit host without the MediaKit workflow and credentials.
Contributor guide
Research direction
Open skills/byted-mediakit-voiceover-editing/templates/review-page/index.html and inspect the three-panel layout at a 390px viewport using the documented DOM measurements. Decide how the panels should stack, collapse, or resize, then validate against real rendered review data in a browser. Done means the review controls remain reachable without page-wide horizontal overflow while the 1280px layout still works.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100