fix(footer): Prevent unexpected input expansion by removing width change on focus #881
Conversation
…nge on focus UX: Prevent unexpected input expansion by removing width change on :focus and adding a subtle border transition. Signed-off-by: Pankaj Kumar Bind <73558583+pankaj-bind@users.noreply.github.com>
✅ Deploy Preview for bejewelled-pegasus-b0ce81 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR fixes issue #827 by preventing the newsletter input field in the footer from unexpectedly expanding on focus. The fix removes dimension-changing styles from the :focus state and replaces them with a subtle border transition for better UX.
Key Changes:
- Simplified the
.footer-input:focusstyles to only increase border width (from 0.5px to 1px) without changing dimensions - Added a smooth border-color transition (0.2s ease) to the input field
- Introduced utility CSS classes for potential newsletter form restructuring
| .newsletter-container { | ||
| display: flex; | ||
| align-items: flex-start; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .newsletter-input-row { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .newsletter-message { | ||
| margin-top: 0.5rem; | ||
| font-size: 0.9rem; | ||
| min-height: 1.5rem; | ||
| } |
There was a problem hiding this comment.
These CSS classes (newsletter-container, newsletter-input-row, and newsletter-message) are not used anywhere in the codebase. They appear to be intended for restructuring the newsletter form in layouts/partials/footer.html, but the HTML template has not been updated to use them. This introduces dead code that will not be utilized. Consider either removing these unused classes or ensuring the corresponding HTML changes are included in this PR to maintain code consistency and avoid confusion.
| .visually-hidden { | ||
| position: absolute; | ||
| width: 1px; | ||
| height: 1px; | ||
| margin: -1px; | ||
| padding: 0; | ||
| overflow: hidden; | ||
| clip: rect(0, 0, 0, 0); | ||
| white-space: nowrap; | ||
| border: 0; | ||
| } |
There was a problem hiding this comment.
The visually-hidden class is already being used in layouts/partials/video-section-related.html but is only now being defined in the footer styles. This creates a scoping issue where the class will only work if footer styles are loaded. Consider moving this utility class to a global stylesheet (like _styles_project.scss or _elements_project.scss) so it's available site-wide and not tied to footer-specific styles.
1 participant
UX: Prevent unexpected input expansion by removing width change on :focus and adding a subtle border transition.
Notes for Reviewers
This PR fixes #827
Signed commits