Bug: Notes text overflows into adjacent grid items (for lists)

[something999]

Problem

When a list is in grid layout view, notes will flow beyond their designated book's grid box, potentially overlapping covers and notes for adjacent books in the list.

Reproducing the bug

1. Go to https://openlibrary.org/people/something999/lists/OL302846L/Pulitzer_Prize_Winners_-_Biography
2. Select Grid (layout).
3. Scroll down to the grid box for Booker T. Washington by Louis R. Harlan (second-to-last row, second from the left).

This bug can also be seen with the grid box for the book W.E.B. Du Bois by David Levering Lewis (fifth row from the bottom, first on the left). The description also overflows the expected boundary but is partially hidden by the cover of another book.

• Expected behavior: The grid box shows notes up to a certain character limit (truncation).
• Actual behavior: The grid box does not appear to have a boundary.

Context

• Browser (Chrome, Safari, Firefox, etc): Firefox
• OS (Windows, Mac, etc): Windows
• Logged in (Y/N): N
• Environment (prod, dev, local): prod

Breakdown

Requirements Checklist

• [ ]

Related files

Stakeholders

---

Instructions for Contributors

• Please run these commands to ensure your repository is up to date before creating a new branch 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.

[mekarpeles]

Solution will be to handle overflows by using css ellipses.

[cdrini]

Something like:

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;

Applied when in grid mode.

[devampatel03]

I would like to work on this. Can this issue be assigned to me ?

[salmoneatenbybear]

@cdrini would it be possible to be assigned to this issue ? I think I can fix this.

PS : also I am just entering this orgs issue page, just wanted to know what triage looks like @ Internet Archive, can I raise a PR without being assigned ?

I see quite a lot of issues which have assignee but no work progress or stale PRs

[NicoTinhas]

Hi, can I work on this?

[tylerbullock05]

Hello, I am taking a class that requires an Open Source contribution on a "good first issue", and I choose this project. Would it be possible for this issue to be assigned to me?

[Nampally-Kundanika]

Hi, I would like to work on this issue. Please assign it to me if possible. Thanks.

[jrdevadattan]

Hi, I would like work on this issue

[mjgandhi2305]

Hey, I would like to work on this issue

[Abhay-coding]

Hi, I understand the issue — the notes section is overflowing outside the grid card. I can work on clamping the text or fixing the grid CSS. Can I take this issue?

[manshusainishab]

hey @mekarpeles I have Identified the issue the problem is with the grid structure their is no flex on each list item of grid instead it contains a div, hr and p tag and the div have a flex property which is also flex-end that is why their is unnecessary gaps at top of each grid item I corrected that but it then the cases we are taking about are have more than one p tag which is causing the overlap assign this to me and I can raise a PR for the fix.

[benjaminmah]

Hello, I'd like to work on this issue, if possible!