bytedance / bytedance/agentkit-samples

Voiceover review page overflows narrow viewports

Open
#262 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.