Skip to content

fix: Notes overflow in List's grid view#11670

Merged
cdrini merged 1 commit intointernetarchive:masterfrom
lokesh:fix/notes-overflow
Jan 30, 2026
Merged

fix: Notes overflow in List's grid view#11670
cdrini merged 1 commit intointernetarchive:masterfrom
lokesh:fix/notes-overflow

Conversation

@lokesh
Copy link
Collaborator

@lokesh lokesh commented Jan 7, 2026

Closes #11174

Fixes text overflow.

Technical

  • Adds a wrapper <div> around notes content which is limited to six lines max. Clamping happens via CSS.

This PR is similar to #11522 but with two differences:

  1. The CSS in this PR is more concise
  2. No server side truncation of the text

Testing

Screenshot

Frame 1 Frame 2

Stakeholders

@cdrini

…k notes

* Replace footer with a styled div for better presentation of book notes
* Add new CSS class for list book notes to improve layout and readability
* Define line-height for short snippets to ensure consistent typography
@lokesh lokesh requested a review from cdrini January 7, 2026 06:58
Copy link
Collaborator

@cdrini cdrini left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's still a bit funky looking (eg) ; I wonder if we might want to hide the note entirely and have it be in some sort of tooltip. But what we have here is way better than what we have currently, so lgtm! Worked on testing.

@cdrini cdrini merged commit 41bbd1b into internetarchive:master Jan 30, 2026
5 checks passed
}
}

.list-books__note {
Copy link
Collaborator

@cdrini cdrini Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah I was too hasty in my testing. This affects the quote even when not in grid mode. We'll likely want to move this to static/css/components/search-result-item.less and only apply if the parent is in grid view.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed here: #11784

@lokesh
Copy link
Collaborator Author

lokesh commented Jan 30, 2026

@cdrini Thanks for all the testing as I seem to have overlooked some scenarios in my tests. 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants