Skip to content

fix: ratio field overflow in custom frame preset panel#1401

Open
anksingh1212121 wants to merge 1 commit into
magic-peach:mainfrom
anksingh1212121:fix/ratio-field-overflow-custom-frame
Open

fix: ratio field overflow in custom frame preset panel#1401
anksingh1212121 wants to merge 1 commit into
magic-peach:mainfrom
anksingh1212121:fix/ratio-field-overflow-custom-frame

Conversation

@anksingh1212121
Copy link
Copy Markdown

Description

When clicking the Custom preset in the frame selector, the Ratio field overflowed its container. The custom dimensions panel used a single non-wrapping flex row, so the ratio label (e.g. Landscape (16:9)) had no room and clipped outside the panel.

Fixed by:

  • Changing the outer container to flex flex-col gap-3 so Width/Height and Ratio stack vertically
  • Wrapping Width × Height in grid grid-cols-[1fr_auto_1fr] so they always stay on the same line
  • Making the Ratio box w-full so it spans the full width below the inputs

Related Issue

Closes #1399

Type of Contribution

  • Bug fix
  • GSSoC contribution

Participant Info

  • GitHub username: [anksingh1212121]
  • Contribution level (Beginner/Intermediate/Advanced): intermediate

after the fix:
Screenshot_20260530_153934

@vercel
Copy link
Copy Markdown

vercel Bot commented May 30, 2026

@anksingh1212121 is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions
Copy link
Copy Markdown
Contributor

✅ PR Format Check Passed — @anksingh1212121

Basic format checks passed. A maintainer will review your code changes.

This does not mean the PR is approved — it just means the format is correct.

@github-actions
Copy link
Copy Markdown
Contributor

👋 Thanks for your PR, @anksingh1212121!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

🟠 GSSoC'26 PR detected — thanks for contributing under GirlScript Summer of Code 2026!

What happens next

  1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
  2. Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
  3. 👀 Code review — a maintainer will review your changes
  4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

  • PR title follows Conventional Commits (e.g. feat: add dark mode)
  • Linked the issue this PR closes (e.g. Closes #123)
  • Tested the changes locally (bun run dev)
  • Build passes (bun run build)

Useful links

Happy coding! 🎉

@github-actions github-actions Bot added level:intermediate Intermediate level - 35 pts type:bug Bug fix gssoc'26 GirlScript Summer of Code 2026 labels May 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc'26 GirlScript Summer of Code 2026 level:intermediate Intermediate level - 35 pts type:bug Bug fix

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] Ratio field overflows container in Custom Frame preset panel

1 participant