search

Altinn / altinn-studio

Next generation open source Altinn platform and applications.
https://docs.altinn.studio
BSD 3-Clause "New" or "Revised" License
114 stars 70 forks source link

Make headers always visible #11619

Open mlqn opened 10 months ago

mlqn commented 10 months ago

Description of the bug

The headers (Header.tsx and AltinnHeader.tsx) does not remain visible when users scroll down the page. This can lead to a bad user experience, as users may have difficulty navigating the site. To improve user interaction and overall usability, we should make the headers always visible when scrolling by using something like: position: sticky; top: 0;

This bug was reported by @standeren.

They should also remains above other elements, using something like: z-index: 999;

Steps To Reproduce

Dashboard

https://github.com/Altinn/altinn-studio/assets/24462611/fd789e64-c635-4951-afc1-08cd368d1967

Overview

https://github.com/Altinn/altinn-studio/assets/24462611/c3d5a5b5-359e-469c-a1a5-4c35138fd790

New Overview

https://github.com/Altinn/altinn-studio/assets/24462611/6c66a625-da19-4a05-b23b-54731625612d

Contact

https://github.com/Altinn/altinn-studio/assets/24462611/038ad445-6748-463e-b803-1e308f7d8914

404

Screenshot 2023-12-04 at 13 36 22

Deploy

Screenshot 2024-02-13 at 16 57 14

Additional Information

No response

TomasEng commented 8 months ago

Is this a bug or a feature? Users don't always expect headers to be visible when delibarately scrolling away from them, particularly when working on a small screen. Such headers may occupy space that could be used for more useful information. There are other ways to make the header more easily accessible, like adding a "go to the top" button or using a "drawer" design, but those shouln't be necessary when the scrolling distance is as short as on our pages.

Anyways, if the header really should stay there at all times (it would be a good idea to perform some user testing for this), I think we should solve it by other means than position and z-index. Those properties tend to introduce a lot of edge-cases that we need to think about, and we have already had several bugs related to them in other parts of Studio. Also, position: sticky makes the scrollbar appear on the whole window, and not only the scrollable area.

We should rather fix it the way it is done on the datamodelling page and in the schema editor, using flexbox and overflow: auto.

Annikenkbrathen commented 4 months ago

Agree that we should gather some insights to see if there is a need for this feature. By now, I haven't got any user feedback on this