Altinn / Altinn/app-frontend-react

Grid view has equal distance between objects in mobile view

Open
#1,924 6 comments 0 reactions 0 assignees View on GitHub
area/accessibility area/table kind/feature-request org/brg status/for-consideration
Dominant language
TypeScript
Stars
21
Forks
33
Avg merge
6d 23h
Merged PRs (30d)
3

Description

### Description of the bug

When using grid and viewing the site on a mobile the distance between elements within a row and the distance between "rows" are equal. This means that when using a mobile or a narrow window on a PC the visual structure disappears and all objects seems to have an qual relationship and relevance to each other

### Steps To Reproduce

1. Log in with random user that has the role "daglig leder"
2. Enter the form: [https://brg.apps.tt02.altinn.no/brg/aarsregnskap-friv-202402/](https://brg.apps.tt02.altinn.no/brg/aarsregnskap-friv-202402/)
3. Navigate to a page with a grid of input fields
4. Change to mobile view or decrease width until components are presented vertically
5. Observe

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Research direction

No source file or test is named. First reproduce the issue using the linked form at a narrow width, then locate the grid component and its responsive layout styles. Done means grid items retain a clear distinction between spacing within a row and spacing between rows on mobile and narrow desktop views.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.