Skip to content

fix(ui): resolve email input border alignment and focus overlay in Footer #1678 - #1757

Open
Tarulatapriya wants to merge 1 commit into
reframe-oss:mainfrom
Tarulatapriya:fix/email-input-alignment
Open

fix(ui): resolve email input border alignment and focus overlay in Footer #1678#1757
Tarulatapriya wants to merge 1 commit into
reframe-oss:mainfrom
Tarulatapriya:fix/email-input-alignment

Conversation

@Tarulatapriya

Copy link
Copy Markdown

Description

This PR resolves the visual styling and alignment defects in the email subscription input located in the website footer, addressing issue #1678.

Fixes Made:

  • Removed Inner Focus Ring: Added outline-none focus:outline-none focus:ring-0 border-none to the <input> element. This successfully removes the default browser focus ring/border box that was creating a "double rounded border" visual bug inside the container.
  • Improved Outer Focus State: Updated the <form> wrapper to include focus-within:ring-1 focus-within:ring-[var(--accent)] so the entire container highlights seamlessly when the user interacts with it.
  • Corrected Alignment & Padding: Tweaked the horizontal padding of the input field (px-1) and the submit arrow button (p-2 ml-1) so the placeholder text and icon are perfectly balanced within the container boundaries.

Related Issue

Fixes #1678

Type of Change

  • Bug fix (non-breaking change which fixes an issue)
  • UI/UX enhancement

Additional Notes

  • Tested to ensure the focus state works seamlessly across all major browsers (Chrome/Safari/Firefox).
  • Prettier was run on Footer.tsx to ensure formatting adheres to the repository standards.
  • Contributing under GSSoC 2026.

@github-actions

Copy link
Copy Markdown
Contributor

👋 Thanks for your PR, @Tarulatapriya!

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:beginner Beginner level - 20 pts type:bug Bug fix type:design UI/UX design type:feature New feature gssoc'26 GirlScript Summer of Code 2026 labels Aug 30, 2026
@github-actions

Copy link
Copy Markdown
Contributor

✅ PR Format Check Passed — @Tarulatapriya

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.

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:beginner Beginner level - 20 pts type:bug Bug fix type:design UI/UX design type:feature New feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] fix email input alignment and remove unexpected blue focus border overlay

1 participant