fix: improve landing page layout, responsiveness and editor UI (#520)

[samritmukherjee]

Key Changes

Grid Wrapping Bug Fix

• Fixed a columns count bug in PrivacySection.tsx where the left column (col-span-6) and right cards column (col-span-7) totaled 13 columns inside a 12-column grid.

• This caused the cards to wrap underneath the text block, leaving the entire right-hand side of wide desktop screens empty.

• Updated layout to:

  • Left column → col-span-5
  • Right column → col-span-7

• Both sections now render side-by-side correctly.

Horizontally Screen-Fit Layout

• Expanded the maximum container widths of landing page components:

  • Navbar
  • Hero
  • FeatureSection
  • PrivacySection
  • WorkflowSection
  • CTASection
  • Footer

• Replaced restrictive max-w-7xl sizing with:

  • max-w-[90%]
  • 2xl:max-w-[1500px]

• Eliminated excessive empty margins on large displays and improved content distribution.

Readability Sizing Enhancements

• Increased small text sizes (text-[9px], text-[10px], text-[11px], etc.) to more readable utility classes such as:

  • text-xs
  • text-sm
  • text-base

• Improved trust card readability and spacing.

• Increased icon sizes from h-4.5 w-4.5 to h-6 w-6.

• Improved Data Flow progress bar thickness and label sizing.

Video Editor UI Improvements

• Increased editor column widths from fixed 340px layouts to flexible 1.4fr / 1.6fr.

• Enlarged:

  • Controls
  • Inputs
  • Presets
  • Slider handles
  • Upload panels

• Updated:

  • VideoEditor
  • PresetSelector
  • FileUpload
  • AudioSpeedControl
  • ImageOverlay

Header Clean-Up on Mobile

• Hid the floating "Star on GitHub" badge below sm breakpoints.
• Prevented overlap with the sticky header and theme toggle.
• Removed duplicate description content on smaller screens.

Removed Duplicate Settings Sections

• Removed duplicated rotation and export configuration panels.
• Reduced unnecessary page length and scrolling.

Responsive Format Presets

• Updated Quick Actions preset grid to adapt responsively:

  • 2 columns on extra-small devices
  • 3 columns on mobile devices
  • 5 columns on tablet/desktop devices

Workspace Compilation Fix

• Excluded nested duplicate directories from root type checking in tsconfig.json.
• Updated reframe/next.config.ts to avoid duplicate lint/typecheck executions during builds.
• Resolved workspace configuration conflicts caused by nested lockfiles.

---

Related Issue

Fixes landing page layout wrapping, viewport width stretching, and small font size legibility issues across different devices.

Closes #520

---

Type of Contribution

• Bug fix
• New feature
• Documentation update
• Refactor
• GSSoC contribution

---

Participant Info

• GitHub Username: SamritMukherjee
• Contribution Level: Beginner (change if applicable)

---

Screen Recording

Recording / Loom Link:
(Add your recording link here)

---

Checklist

• I have read the contribution guidelines
• My changes follow the project structure
• I have tested my changes in Chrome, Firefox, and Safari
• bun run lint passes (no ESLint errors)
• bunx tsc --noEmit passes (no TypeScript errors)
• New interactive elements have aria-label / accessible names
• No console.log statements left in
• This PR is related to a valid issue
• Screen recording attached above (required for UI/feature/design changes)

Uploading Screen Recording 2026-05-29 170347.mp4…

[vercel]

@samritmukherjee 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]

✅ PR Format Check Passed — @samritmukherjee

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]

👋 Thanks for your PR, @samritmukherjee!

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

• 📖 CONTRIBUTING.md
• 🐛 Open Issues
• ⭐ Star the repo to support the project!

Happy coding! 🎉