canonical / canonical/vanilla-framework

Allow `p-table--mobile-card` headings to wrap

Open
#4,845 4 comments 0 reactions 0 assignees View on GitHub
P3 Triaged Triaged: v4 WG: Validated
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

## Pattern to amend

`p-table--mobile-card `

## Visual

![image](https://github.com/canonical/vanilla-framework/assets/58276363/5fc9189b-10e8-4518-9b21-3550516c4d7b)

```
.p-table--mobile-card tbody th {
white-space: normal;
}
```

## Context

Often the heading is not fully readable. This defeats the purpose of breaking the table out into cards.

See conversation on this pr: https://github.com/canonical/ubuntu.com/pull/13049

Contributor guide

Open the contributing guide

Research direction

Search the `p-table--mobile-card` styles and inspect the `tbody th` rule shown in the issue. Compare the mobile-card rendering with the linked visual and conversation; done means table headings wrap and remain fully readable on mobile.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, sass
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.