Increase Source Records links' touch target spacing

[jess-ho]

Closes #9635

Fix/make adjustments to UI of Source Records

Technical

Implementation is based on this comment
This will increase the space between Source Records links to prevent accidentally tapping/clicking a different link.

This should also pass all major accessibility requirements for AA (https://dequeuniversity.com/checklists/web/links)

Testing

Follow this wiki to import some books from production: https://docs.openlibrary.org/2_Developers/misc/Loading-Production-Book-Data.html

Some books I used for testing:
Dune: /books/OL26242482M
Harry Potter and the Sorcerer's Stone: /books/OL26629979M
Pioneers: /books/OL24982896M
Talking with Psychopaths and Savages: /books/OL35567062M

After importing:

1. Run Docker
2. Open any book page (ex. http://localhost:8080/books/OL26629979M/Harry_Potter_and_the_Sorcerer%27s_Stone)
3. Scroll down to the Book Details section to view Source Records

Screenshot

Desktop:

Mobile:

Stakeholders

@cdrini @mekarpeles

[hornc]

This is great to have the source records as list items, that seems like the correct HTML to use for these, but why does the desktop screenshot have four (I think?) sources on two lines? I thought the mobile view was better, but it is also wrapping the SFPL MARC record link to associate with the BetterWorldBooks link, which is unrelated.

Having one source record per line is important to me so I can tell at a glance how many different sources there are, This is something I check a lot for my librarian work.

Edit: I think the display: flex CSS is unnecessary, it breaks the list and with the extra spacing between all links it's even harder to tell which links go with each record.

[jess-ho]

@hornc Thanks for the feedback! I'm still getting used to the structure of the project and definitely came at this from a technical perspective. Your explanation makes it much clearer how source records will be used and what would be more beneficial.

I've updated the layout so that there is one source record per line. Only exception I'm seeing is on mobile where a link is longer and causes the second link to wrap to the next line, but it won't appear with the next record. See below for updated screenshots. Let me know if this aligns more with what's expected and if any other changes are needed

Desktop:

Mobile:

[hornc]

Thanks @jess-ho , that looks much better for my needs. The wrapping on mobile is unavoidable as you say, we should make the names shorter if that's a problem, and there are ways to give long items names at cleaner display name already, so this looks great! ty

[cdrini]

Awesome, thank you @jess-ho ! This is looking great! One issue: although the spacing has now increased, the click regions themselves are still rather small; eg

We want the anchor elements to have a slightly larger click region, so that they are easy to press. You can do this by changing the padding of the <a>. Using display flex adds space around the anchor element. Let us know if you hit any issues!

[cdrini]

Sweeet tested and this should fix the issue!

Note I removed the horizontal spacing ; the guidelines recommend 24+ pixels from the centre of each clickable element to another clickable element, and horizontally we get that by virtue of the fact that the words are long! 😁