fix(ui): resolve email input border alignment and focus overlay in Footer

[codexbeats]

📝 Title

fix(ui): resolve email input border alignment and focus overlay in Footer

---

📌 Type of Change

• 🐛 Bug fix (non-breaking change which fixes visual styling/alignment bug)
• ✨ New feature
• 🧹 Refactor / Code quality
• 📚 Documentation

---

🔗 Related Issue

Fixes #1678

---

🎯 What Changes Were Made?

1. Focus Ring & Outline Reset: Applied explicit resets (border-0 outline-none focus:outline-none focus:ring-0 focus:shadow-none focus:border-0) to the <input> element inside Footer.tsx to override global input styles.
2. Alignment & Spacing: Adjusted horizontal padding (px-1) on the email field and added shrink-0 to the submit arrow button for balanced alignment.

---

❓ Why Were These Changes Made?

• Global input:focus rules defined in globals.css were overriding bg-transparent and adding a secondary border/box-shadow directly to the inner <input> element.
• This caused a nested blue focus outline box inside the form container around the placeholder text upon selection.

---

🧪 How to Test

1. Run bun dev or npm run dev to launch the local development server.
2. Scroll to the footer of the page.
3. Click on the "ENTER YOUR EMAIL" input under the UPDATES section.
4. Verify that:
   • No inner blue border overlay or box-shadow appears inside the box.
   • The focus border smoothly highlights the outer form wrapper only.
   • Text alignment and submit icon remain centered and responsive.

---

⚠️ Breaking Changes

• None. This change is strictly visual/CSS and affects only the footer newsletter input element.

---

📋 GSSoC Contribution Checklist

• My code follows the code style guidelines of this project.
• I have performed a self-review of my code.
• I have linked the relevant issue.
• The changes generate no new warnings or console errors.

[vercel]

@codexbeats 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 — @codexbeats

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, @codexbeats!

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! 🎉