Add Arrow to dropdown list

[Spedi]

Closes #9065

This PR makes sure to correctly show the arrow on the Add to List dropdown button on the Author page.

Testing

1. Check an Author page and see if the arrow is shown correctly in the Add to List button.

Screenshot

Stakeholders

@RayBB

[RayBB]

@Spedi your changes seem to have some unintended effects on the dropdown. Making a big indent and showing new text.
Can you fix this?

Before	After

[Spedi]

That's weird, I'll have a look at the codebase to find some answers. Do you have any idea about what this can be related to?

[Spedi]

I suppose the error I made is that the changes "copy" the dropdown list that's on the Want to Read button, so they inherit the indentation and the unwanted text. Do you think that's a possible explanation of the bug?

[Spedi]

The problem seems to go away if I add old-style-lists to <div class="generic-dropper__dropdown old-style-lists"> $:dropdown_content </div>.
The thing is that the same type of template goes to the Want to Read dropdown too, which is something that we don't want. Should we manage the two dropdowns differently? If yes, how can I try to do that, do you have any suggestions?

[Spedi]

Changing everything as it was before the PR, and changing the visibility of arrow to visible in the old-style-lists css styling should work, since I tried to do it manually with the Inspect function of the browser.
However if I test the code I don't see the changes, since the visibility is set to hidden.
How is it possible if I set it to visible in the code?

[RayBB]

@Spedi in reviewing your PR, I also noticed that it is weird that the visibility is set to hidden in some cases. I don't have the time to dig into it now but perhaps if you can uncover that (it could be in the JS?) then you might be able to find a nice solution.

[Spedi]

I'm still trying to work on it.
I've tried disabling JS on the Dev Tools but it had no effect on the result, so maybe the problem isn't there.
Could it be a problem of CSS specificity?

[RayBB]

It can be the CSS specifically. It likely has to do with nested css which can make it a bit tricky to untangle.
I imagine this is why the code was left a little messy like this with the old styles class.
Have tried looking at other dropdowns on the site to compare the html/css?

[jimchamp]

Thanks @Spedi, and sorry for the very late review!

I think that we should avoid changes to openlibrary/templates/lib/dropper.html, which is meant to be a generic base component for all droppers.

I think if you remove this CSS rule, the arrow will be visible.

[jimchamp]

However if I test the code I don't see the changes, since the visibility is set to hidden.
How is it possible if I set it to visible in the code?

@Spedi, when a .less file is changed, it has to be compiled into CSS. Try running the following after you make a change, and see if it helps:
docker compose exec web make css

If you're doing a lot of CSS work, it may be better to run the following:
docker compose exec web npm run watch-css

watch-css will build the CSS assets every time a .less file is saved.

[Spedi]

@jimchamp Should I run docker compose exec web npm run watch-css while running docker compose up?

[jimchamp]

Yes. Your web container needs to be running, so run docker compose up first. Alternatively, you can run docker compose run --rm home make css without first running docker compose up.

[Spedi]

@jimchamp It worked!
Made the correct changes, gonna do a PR soon, thank you and @RayBB for the patience!

[Spedi]

This should close the issue, linking some pictures of the new dropdown list:

[jimchamp]

This looks good to me. Will revert the my_books/dropper, then merge when the tests pass.