Fixed arrow alignment in covers modal

[Craig-Rosario]

Closes #10134

Align/Fix the navigation arrows, positioning them on the sides of the covers for better usability.

Technical

Testing

1. Go to the add-cover section of a book (eg. https://openlibrary.org/works/OL69166W/Italian_journeys/add-cover)

Screenshot

Before:

After:

Stakeholders

@mekarpeles

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 17.59%. Comparing base (347bff9) to head (a5b8930).
Report is 254 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #10169      +/-   ##
==========================================
+ Coverage   17.12%   17.59%   +0.46%     
==========================================
  Files          89       88       -1     
  Lines        4752     4769      +17     
  Branches      831      847      +16     
==========================================
+ Hits          814      839      +25     
+ Misses       3428     3411      -17     
- Partials      510      519       +9     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[mekarpeles]

This may affect the buttons on other pages as well (e.g. the homepage) so we may have to do some testing

[Craig-Rosario]

Yeah, some testing may be required, because when the value is:
right: -25px

some part of the arrow actually clips out of the box.

[cdrini]

Ah, the issue here is that the CSS meant for the "Use this image" button are also applying to the left/right button. Because of this css rule: .ol-cover-form .carousel button. Changing the rule to .ol-cover-form .carousel .cta-btn should fix the issue 👍 That's a preferable approach, since it makes fewer changes, and is less likely to affect other parts of the page and cause bugs.

[Craig-Rosario]

Yeah, made the necessary changes, works great now. Also adjusted the z-index to ensure it doesn’t interfere with the book image.

[cdrini]

Looks great! Thank you @Craig-Rosario !

[Craig-Rosario]

No worries, glad I could help😊