Altinn / Altinn/app-frontend-react
Input Field Shifts Position When Help Icon Is Added
- Dominant language
- TypeScript
- Stars
- 21
- Forks
- 33
- Avg merge
- 6d 23h
- Merged PRs (30d)
- 3
Description
### Description of the bug
When a question mark help icon is added to an input field, the entire input box is shifted down by a few pixels. This creates a misalignment, which becomes particularly noticeable when two input fields are placed horizontally next to each other—one with a help icon and one without.
Expected Behavior: The input field should remain in the same vertical position whether a help icon is present or not. The addition of help text should not impact the alignment of the input field.
Actual Behavior: The input field with the help icon is moved down slightly, causing a visual inconsistency

### Steps To Reproduce
Place two input fields side by side.
Add a question mark help icon to one of the fields.
Observe the misalignment between the two fields.
### Additional Information
_No response_
Contributor guide
Research direction
Reproduce the issue with two input fields placed side by side, adding a question-mark help icon to only one. Inspect the frontend input and help-icon rendering and styling, then verify that both fields keep the same vertical position with and without help text.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100