internetarchive / internetarchive/openlibrary
Subjects page headings split across columns
- Dominant language
- Python
- Stars
- 6.7k
- Forks
- 2k
- Avg merge
- 2d 19h
- Merged PRs (30d)
- 138
Description
### Problem
The Subjects page has a layout bug in which category headings and their lists do not stay together across columns. Some headings can appear at the bottom of one column while the associated links start at the top of the next column. This creates empty space under certain headings and disrupts the section's visual grouping.
Split headings:
### Reproducing the bug
Go to Open Library's [Subjects](https://openlibrary.org/subjects) page and examine the headings and their associated lists.
Expected behavior:
Each heading and its associated list should stay together in the same column when possible
Actual behavior:
The headings and lists can split across columns, causing awkward visual grouping
### Context
- Browser (Chrome, Safari, Firefox, etc): Firefox and Chrome
- OS (Windows, Mac, etc): Windows
- Logged in (Y/N): Y
- Environment (prod, dev, local): prod
### Breakdown
Adjust the CSS for the Subjects page so each heading and list group is treated as a unit and sticks together in a column. This can be done by enforcing rules for h3 headings and ul in `openlibrary/static/css/page-user.css`
``` css
div#subjectsPage h3 {
break-after: avoid;
}
div#subjectsPage ul {
display: inline-block;
break-before: avoid;
}
```
Implementation Details (for maintainers)
#### Requirements Checklist
* [ ]
#### Related files
*
#### Stakeholders
*
#### Instructions for Contributors
- Please [run these commands](https://docs.openlibrary.org/developers/tools/git.html#working-on-your-branch) to ensure your repository is up to date **before** [creating a new branch](https://docs.openlibrary.org/developers/tools/git.html#making-changes-and-creating-a-pull-request) to work on this issue and **each time after** pushing code to Github, because the pre-commit bot may add commits to your PRs upstream.
Contributor guide
Assessment
This issue has not been assessed yet.