Altinn / Altinn/app-frontend-react

Text cells in grid component are not rendered in mobile viewport

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

Description

### Description of the bug

Text cells are not rendered in the new grid component when it is displayed as a table in mobile viewport.

This happens because of `nodesFromGrid` is called in mobile viewport and it skips cells that contains text. See image below.
A possible solution is to use paragraph components instead, but this is probably not an optimal solution since text cells works in desktop view?

![image](https://user-images.githubusercontent.com/74791975/236409479-84622875-2ca2-41fa-b9d9-43c693ef73f1.png)

### Steps To Reproduce

1. Create the new grid component with text-cells.
2. Limit the width to less than 765px.
3. The component acts as a table now and does not display the text cells.

### Additional Information

Conversation with SSB about this:
https://altinn.slack.com/archives/C02EVE4RU82/p1683103041485429

Contributor guide

Open the contributing guide

Research direction

Start with the nodesFromGrid call used when the grid switches to table layout below 765px, then reproduce the issue with a new grid containing text cells. Trace why text cells are skipped in the mobile viewport and verify that the text is rendered while desktop behavior remains unchanged.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.