Altinn / Altinn/app-frontend-react

New size of box with helptext on i.e. multiple clicks - in general weird layout/sizing/placement of the help boxes

Open
#1,026 0 comments 0 reactions 0 assignees View on GitHub
kind/bug
Dominant language
TypeScript
Stars
21
Forks
33
Avg merge
6d 23h
Merged PRs (30d)
3

Description

### Description of the bug

Kind of 2 issues, still very similar, so think it's fine to have 1 issue? Not a critical bug, but would be nice to have a fix in the future. :-)

1) The box for the helptext/-button has a weird placement in comparison to the component it's attached to. Often this is related to adjusting browser/screen size, as the button doesn't "follow along" if the text is cut to continue on the next line (see screenshots with extra spacing between text and help-button).

2) The box sizing of the helptext changes every time one clicks on it. It doesn't happen on all the help-components, and isn't bound to happen every time the user tries this (but relatively often). This also impacts with some weird, small box formats where it perhaps would be natural to have larger boxes (on initial clicks). See screenshots below. I managed to get 6 different sizes, and some of them (the smallest) make it difficult to read the text.

![image](https://user-images.githubusercontent.com/113341248/226892596-07662775-85c0-4f7e-b34a-57a459b31664.png)

![image](https://user-images.githubusercontent.com/113341248/226892616-b037aeea-b20b-42e8-961c-f0d3fae4b71e.png)

![image](https://user-images.githubusercontent.com/113341248/226892628-bb98b98b-8248-4fc6-be67-488b8f7c06fd.png)

![image](https://user-images.githubusercontent.com/113341248/226892640-8bb8dac6-52f3-497a-9c43-8559e37b8331.png)

![image](https://user-images.githubusercontent.com/113341248/226892662-33e21341-8c0c-4be6-8135-f0c4cc8a864e.png)

![image](https://user-images.githubusercontent.com/113341248/226892675-3c2b2870-54c1-4366-bd0f-70a97e80a26b.png)

### Steps To Reproduce

1. Log in to this form in tt02: krt.apps.tt02.altinn.no/krt/krt-1007a-1/
2. Click "Ja" on radiobutton field 1.2.2
3. Go to second page Nøkkelopplysninger - 2.
4. Scroll down to field 1.7, and click the help-button (questionmark) for 1.7.1 multiple times to see the sizing of the box containing the helptext change.

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the help-button behavior at the tt02 form URL using the listed fields and repeated clicks, including a resized or wrapped layout. Inspect the help-text component and its positioning and sizing behavior; done means the box stays readable and attached to its component across repeated clicks and text wrapping.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.