Synced from GitHub
fix(web): file preview videos keep their own aspect ratio#21839
Problem
Opening a portrait or square video in the Files panel plays it inside a 16:9 frame. A 1080×1920 phone recording renders as a short, wide black box with a narrow strip of picture in the middle. Images in the same panel and the expanded video viewer already keep their own proportions.
To reproduce, open any portrait .mp4 from the Files panel, or click a link to one in chat.
Change
MediaVideoPlayer defaults to a 16:9 box (aspect-video w-full), which suits inline chat media that must hold a stable slot while it loads. The file preview did not override it. The preview now passes videoClassName="aspect-auto max-h-full w-auto max-w-full", so the video sizes from its own dimensions and fits inside the panel. The image preview in the same panel uses the same sizing. The inline chat player and its 16:9 loading slot are unchanged.
Scope and approval
This is a very small fix for an obvious bug. A one-line class change in the file preview's video, with no change to shared components, contracts, or other surfaces.
Verification
Checked in T3's browser panel against an isolated dev server on this branch, with generated 1080×1920, 1920×1080, 1080×1080, and 320×180 videos. The measured video boxes are in a 507×676 preview area.
| Video | Before | After |
|---|---|---|
| 1080×1920 | 507×285 (16:9) | 380×676 (9:16) |
| 1080×1080 | 507×285 (16:9) | 507×507 (1:1) |
| 1920×1080 | 507×285 | 507×285 (unchanged) |
- A short panel (viewport 1280×400) keeps the landscape video at 16:9, 491×276, limited by height.
- A narrow panel (viewport 760×900) keeps it at 16:9, 287×161, limited by width.
- A 320×180 video now shows at its natural size instead of being stretched to the panel width. This matches how the panel shows images.
vp lintandvp fmt --checkon the changed file are clean.vp run --filter @t3tools/web typecheckpasses.
Not checked: the packaged desktop app, which renders the same web component. The mobile file preview has its own player with a separate 16:9 frame and is not part of this change.
Note
🤖 Agent assistance: Claude Opus 5.5 via Claude Code
Checks
23 successful · 13 skipped
Added 1 commit
- fix(web): file preview videos keep their own aspect ratio2febdb3
Synced from GitHub
Approvability
Verdict: Approved at 2febdb3
Macroscope's review found this PR approvable — This is a one-line, localized styling fix that lets workspace file-preview videos preserve their intrinsic aspect ratio while keeping the shared video player and other media surfaces unchanged. It has a small, readily bounded runtime impact and no schema, infrastructure, security, billing, or static-analysis changes.
You can add or adjust custom eligibility rules. Learn more.
Synced from GitHub
No actionable comments were generated in the recent review.
External image Recent review info
-
External image Run configuration
- Source mode: Auto
- Repository: pingdotgg/t3code
- Branch: main
- File: .coderabbit.config.ts
- Commit: 80a2351
- Layers: Repository TS config
- Review profile: CHILL
- Plan: Advanced
- Run ID:
c35cd3a5-9d2b-43e7-b739-2f44481d5381
External image Commits
Reviewing files that changed from the base of the PR and between 2febdb33aac90f9ad065a77be4b1c84cc3659c37 and bde03c756431a7754f05e425ee1cf22ba0d07808.
External image Files selected for processing: 1
apps/web/src/components/files/FilePreviewPanel.tsx
Limit details: You’ve used all 10 included reviews currently available.
Walkthrough
The video preview now uses sizing classes that preserve its aspect ratio and limit its height and width to the available space.
Changes: Video preview sizing
Layer / File(s) Summary Constrain video dimensions
apps/web/src/components/files/FilePreviewPanel.tsxWorkspaceVideoPreviewpasses classes to preserve the video’s aspect ratio and limit its dimensions.Estimated code review effort: 1 (Trivial) | ~3 minutes
Change: Bug fix
Possibly related PRs
- pingdotgg/t3code#21894: Both changes size file-preview videos to preserve their intrinsic aspect ratio.
Suggested labels:
bugfixSuggested reviewers:
juliusmarminge
Merge Risk: External image Minimal · up to bde03
No actionable merge-blocking risk is established for this change.
Pre-merge checks: Passed 4
Check name Status Explanation Title check Passed The title clearly and concisely describes the main change: file preview videos preserve their own aspect ratio. It uses an appropriate conventional commit format. Description check Passed The description is complete and relevant. It explains the problem, change, scope, approval rationale, verification steps, measured results, screenshots, checks performed, and known limitations. Linked Issues check Passed Check skipped because no linked issues were found for this pull request. Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
Finishing Touches
Generate unit tests (beta)
- Create a new PR
- Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Usage-based review receipt
- Mode: Continue automatically
- Reviewed files: 1
- Charged: $0.25
- View usage details
Note
This review was completed with usage-based billing: files reviewed beyond your plan's included limits are billed at $0.25/file. View usage-based billing.
Added 1 commit
- chore(web): merge main into file preview aspect ratio fixbde03c7
Note
Written by gpt-6.1-sol on behalf of Maria
thanks to NikitaMGrimm for keeping this fix local to the file preview. i preserved the original commit and merged current main into the writable fork branch. the diff against main is still exactly the original one-line override; no additional code was needed.
verified at bde03c756431a7754f05e425ee1cf22ba0d07808:
vp run check:changed github/mainpassed on blacksmith: format, lint, both knip checks, affected typechecks, 35 file-preview tests, and the selected react compiler check.- all 4 existing
MediaVideoPlayer.browser.test.tsxtests passed on blacksmith. - reproduced main's forced 507×285 frame for portrait and square videos in the real web app. the fix renders them at 360×640 and 480×480. landscape remains 507×285; a small video stays 320×180.
- checked all four shapes at 760×900 and 1280×400 in light and dark themes. all 16 cases retain their intrinsic ratio and fit the panel. file-explorer selection, switching files, asset loading, and playback passed in system chrome.
- two independent scoped reviews found no issues on this head.
unverified: packaged desktop and native mobile. mobile uses a separate player and is outside this fix. shared player and chat defaults are unchanged.
matching files-panel captures, main on the left and this head on the right:
Note
Written by gpt-6.1-sol on behalf of Maria
Verified in a real dev environment
the existing head bde03c756431a7754f05e425ee1cf22ba0d07808 works as-is. no code changes or pushes were needed.
- reproduced on
github/mainat6d46336476941257d774be7c7733e9caf201fec2in a separate worktree aftervp i. ran main and the exact pr head sequentially with isolated development state, one dev server at a time. - used playwright from the repo and
/usr/bin/google-chromeagainst the real dev web app. created a project for a real git repository through the app. a real codexgpt-6.1-solturn generated and committed the media files, then returned clickable file links. a second real codex turn on the pr head read the files and returned links plus inline media. no mocked server, provider, or database records. - clicked chat links and selected files in the files explorer. at 1440×900, portrait changes from a 507×285 video box to 360×640; square changes from 507×285 to 480×480. landscape remains 507×285, and a small video uses its natural 320×180 size.
- checked all four video shapes at 760×900 and 1280×400 under light and dark color schemes. all 16 cases preserve the source ratio and fit the available panel. the narrow layout uses the actual preview sheet.
- exercised portrait and landscape playback, pause, file switching, native fullscreen entry/exit, image preview, text preview, and inline chat video playback. inline chat retains its 16:9 slot; the image viewer still opens.
vp run check:changed 80a2351fcb909034e65a512dfabeb3cdfd367762passed throughblacksmith-check: format, lint, both knip checks, affected typechecks, all 35 selected file-preview tests, and the selected react compiler check. the worker initially lacked browser binaries; installed them and reran successfully. the head also reports 29 successful ci checks.
matching data and viewport, before and after:
main: portrait video forced into a 507×285 frame
pr: portrait video preserves its 360×640 dimensions
main: square video forced into a 507×285 frame
pr: square video preserves its 480×480 dimensions
real app: portrait playback, square preview, then landscape playback
Not verified
packaged electron clients, native ios/android, safari/firefox, and remote relay/tunnel connections were not exercised on this linux vm. mobile uses a separate player outside this one-line web change. other providers were not exercised; real provider verification used codex gpt-6.1-sol through the local proxy.