Edition omnibar mis-aligned + clipped

[cdrini]

Problem

Also clipped awkwardly after having scrolled:

Reproducing the bug

1. Go to any book page in mobile screen size, eg https://openlibrary.org/books/OL1088853M/Wizard%27s_First_Rule

• Expected behavior: The arrow is vertically centred, and the text isn't so awkwardly clipped. This should likely be full width.
• Actual behavior: Not centred; clipped.

Context

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

Breakdown

Requirements Checklist

• [ ]

Related files

• openlibrary/macros/EditionNavBar.html

• openlibrary/openlibrary/templates/type/edition/view.html

  Line 207 in 77c16d5

  $:macros.EditionNavBar(reader_observations, work.edition_count, show_observations)

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.

[Craig-Rosario]

Hi, I’m a first-time contributor and would love to work on this issue. Could you please assign it to me?

[DachiCharkviani]

Hello, I am a first time contributor too, needing to contribute to an open source code for my college assignment. Would appreciate the assignment.

[cdrini]

Howdy @Craig-Rosario , go for it; assigning it to you. Please let us know if you have any questions.

I'll keep you in mind for another one @DachiCharkviani 👍

[DachiCharkviani]

@cdrini Thanks! I also commented on #10095. I would gladly work on that one. I added more information there in the comment of that issue.