Description
The email input field under the UPDATES section in the website footer suffers from visual styling and alignment defects:
- Unexpected Blue Outline/Border Box: Focusing on the email text box triggers a nested blue focus outline/box-shadow inside the container instead of highlighting the outer form wrapper seamlessly.
- Alignment & Padding: The placeholder text
"ENTER YOUR EMAIL" is misaligned relative to the form boundaries and the submit arrow button.
Expected Behavior
- The inner
<input> field should be frameless with transparent background and no internal focus ring.
- Focus state should cleanly highlight the outer form wrapper (
focus-within:border-[var(--accent)]).
- Text padding and icon alignment should be balanced.
Actual Behavior
An inner blue border box appears inside the form container around the placeholder text upon clicking/focusing, creating double rounded borders and visual misalignment.
Steps to Reproduce
- Scroll down to the website footer section.
- Locate the UPDATES email subscription box.
- Click inside the "ENTER YOUR EMAIL" input field to focus.
- Observe the unexpected inner blue focus ring/border line and text alignment.
Environment
- Framework: Next.js (App Router / React)
- Styling: Tailwind CSS
- Component:
Footer.tsx (/src/components/Footer.tsx)
- Browser: Chromium-based browsers (Chrome/Brave/Edge) / Firefox / Safari
- OS: macOS / Windows / Linux
Description
The email input field under the UPDATES section in the website footer suffers from visual styling and alignment defects:
"ENTER YOUR EMAIL"is misaligned relative to the form boundaries and the submit arrow button.Expected Behavior
<input>field should be frameless with transparent background and no internal focus ring.focus-within:border-[var(--accent)]).Actual Behavior
An inner blue border box appears inside the form container around the placeholder text upon clicking/focusing, creating double rounded borders and visual misalignment.
Steps to Reproduce
Environment
Footer.tsx(/src/components/Footer.tsx)