Make changes in the editions component for tablets

[koderjoker]

Page: http://openlibrary.org/works/OL15203543W/Meistersinger_von_N%C3%BCrnberg

Is your feature request related to a problem? Please describe.

Continuation of #1339. For screen widths <=789px and >500px the read ebook button is far too wide, further changes in the editions component are required.

Proposal & Constraints

Some previous discussions to start off from:

---

Originally posted by @tfmorris in #1899(comment)

Did reducing with width of the "Read" button get lost? I commented on it a few weeks ago and @koderjoker said:

For starters, the width of the 'read eBook button' definitely needs to be reduced. We then could have the 'daisy and download links' on one line and the 'library and purchasing links' on another, but the read ebook button would still have space left over on the side...

which sounded like agreement that it was too wide. Paradoxically, it's fine when the screen is wide, but below ~770 pix, it jumps to full width.

---

Originally posted by @koderjoker in #1899(comment)

Shifting download links to a dropdown (to overcome problem of whitespace and make download links bigger for mobile)
Rough visualisation

---

Originally posted by @koderjoker in #1899(comment)

For tablet

Unfortunately, the tablet version still needs changes :p

For starters, the width of the 'read eBook button' definitely needs to be reduced. We then could have the 'daisy and download links' on one line and the 'library and purchasing links' on another, but the read ebook button would still have space left over on the side...

We could overcome that with a future download button though. The 'read ebook and download button' on one line, and 'library links and purchase links' on another.

---

However, the above would require deciding on a design for a dropdown.

[jdlrobson]

Maybe we want to expand this issue to be a redesign given the comments by @BrittanyBunk in #679 (comment)

[SaravgiYash]

@jdlrobson I would like to work on this issue.
Currently only Download for print-disabled is present and in another issue, I have added Worldcat link.
So in this issue, I just have to reduce the Borrow button width?

My suggestion: We can keep the desktop design till width: 568px this will solve the issue.

[jdlrobson]

This is mostly fixed.

Help fixing the size of the buttons on https://openlibrary.org/works/OL15203543W/Meistersinger_von_N%C3%BCrnberg here to be the width of the label is all that's needed to resolve this now:

Help fixing that appreciated! Feel free!

The buttons in the screenshot below are fine and working as expected

[github-actions]

Assignees removed automatically after 14 days.