AO3-4629 Fix positioning of Chapter Index and Download menus

[sarken]

Issue

https://otwarchive.atlassian.net/browse/AO3-4629

Purpose

Fixes the positioning issues with the Chapter Index and Download menus on works by

• changing how the Download menu is displayed when JavaScript is disabled. (The Chapter Index menu is not displayed unless JavaScript is enabled, only a link to a separate Chapter Index page.)
• adhering closely to the current appearance when JavaScript is enabled.

I also

• changed from links to buttons because these are not links to other pages, just buttons that trigger a JavaScript behavior.
• removed the role and aria-haspopup attributes because no ARIA is better than bad ARIA. I'll make a new issue (and pull request) to improve the accessibility of our accordions in the nearish future.
• made the capitalization of the "Full-page index" link "Full-Page Index" to be consistent with our usual titlecase capitalization on actions. I went with "Full-Page" rather than "Full-page" because we usually capitalize non-minor words after the hyphen, e.g. Co-Creator and Next-of-Kin, but Sign-up.

We rarely chain our classes like .work.navigation, but in this case, we really do only want this specific navigation, which is used in both .chapter-show and .work-show, so the Rails view classes didn't make a ton of sense as options either.

Testing Instructions

Refer to Jira.

[bingeling]

The code looks fine and it's working fine with JavaScript on and off and with keyboard and with mouse control. However, in my simulated mobile view (iPhone SE via Arc) the left side of the chapter menu is a bit cut off. It's still readable and usable and I'd call it an improvement over the current state. But I wanted to raise it, in case it didn't happen for you. It does not happen on my actual phone (iPhone 12 mini), because that would be helpful.

[sarken]

If it's the first gen iPhone SE, it's probably because it's a little bit narrower than the iPhone 12 mini. If it's a different version... yeah, beats me. Older OS, older browser, more weirdness?

But in general, yeah, it's definitely something that can happen depending on the width of your screen, your font size, and maybe the length of the chapter title. (It happens with the chapter menu in the version that's on production, too.)

It's preventable with the download menu if we switch from a horizontal list to a vertical one, but I found it was also harder to cause it with the download menu -- I really had to crank my font size up -- so I felt it was better to stick with the current horizontal design.

I don't think it's particularly fixable on the chapter menu unless we start resizing and repositioning things with JavaScript or do a more radical reorganization of the buttons. I'd personally lean toward the second option, but in either case, I think this is probably enough of an improvement to be worth doing until then.

[bingeling]

Set this to ready to merge because I concur, this is an improvement over the current state.