Altinn / Altinn/app-frontend-react

Formatting of definition list (CSS)

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

Description

### Description

The formatting of a definition list ("formatering av definisjonsliste") is missing. All the components in the list have the same format, and this makes the list difficult to read:
![Image](https://github.com/user-attachments/assets/7b1ed8cc-54a8-4adf-9397-643e0ad23c3e)

It should look something like this (copied from https://interactive-examples.mdn.mozilla.net/pages/tabbed/dd.html):

![Image](https://github.com/user-attachments/assets/733eba21-89b8-40a2-a286-03c2d2ba6ee6)

This example uses a CSS looking like this:
`p,
dt {
font-weight: bold;
}

dl,
dd {
font-size: 0.9rem;
}

dd {
margin-bottom: 1em;
}`

### Additional Information

Discussed on Slack here: https://altinn.slack.com/archives/C068SF24QQM/p1732703663504899

Contributor guide

Open the contributing guide

Research direction

Start by locating the CSS that styles definition lists in the app-frontend-react frontend, then compare the current rendering with the linked MDN example and the CSS shown in the issue. Done means the list visually distinguishes terms from descriptions and adds readable spacing without making all components look identical.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
design, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.