Openlibrary: Thumbnails get cut up/squished on list pages (on mobile) and in search results

[jdlrobson]

Description

What problem are we solving?

Thumbnails are getting cut off on list pages.

In search autocomplete results......... and inside lists (e.g http://localhost:8080/account/books/want-to-read) they sometimes get squished.

This seems to be caused by mixing height and width definitions such that the image is forced to be outside its aspect ratio

Evidence

What does the experience look like today? What are the symptoms?

See screenshot below.

Relevant url:

https://openlibrary.org/people/jdlrobson/lists

Screenshot (if possible):

Expectation

What should by happening? What will it look like / how will it behave?

The thumbnail should not be cut in half.

Details

What page(s) are impacted?
e.g. https://openlibrary.org/...

Logged in (Y/N)?

Browser type/version?

Operating system?

Proposal

What is the proposed solution / implementation? Is there a precedent of this approach succeeding elsewhere?

Constraints

Which suggestions or requirements should be considered for how feature needs to appear or be implemented?

Priority

What evidence do you have this feature or bug is important to this audience? What can't we do because this bug exists or this feature doesn't exist? How many users will be (or are) impacted? What is the value to us and/or to each user impacted? How much time/money can be earned/saved?

Stakeholders

@ tag stakeholders of this bug / feature

[rohitjain00]

We could just have the image to full row and the information of the same image below it.

[jdlrobson]

Agreed! I think rather than centering though it would make sense to keep the left alignment to be kept consistent with the rest of the site!

[jdlrobson]

@rohitjain00 did you want to have a go at fixing this?

[rohitjain00]

@jdlrobson yes, I will make a pull request as soon as possible

[jdlrobson]

Any updates @rohitjain00 ?

[koderjoker]

Hi @jdlrobson, can I have a go at fixing this?

[jdlrobson]

@koderjoker we haven't heard back from @rohitjain00 so I think you can go ahead. Important thing is to get the bug fixed - we have plenty of these kind of tasks!

[rohitjain00]

I am sorry I was not able to follow up on this issue. I lost a track of it, thanks @koderjoker for fixing this.