Reduce height of metadata section by conditionally showing tag row

[zarvox]

Tags are not always the most useful piece of information to show, and much of the time when working on a puzzle, you'd really rather have a bit more vertical space for the spreadsheet.

To that end: this patchset makes the tag row of the puzzle metadata section into a popover, and shows it only when the metadata section already has the mouse over it or is focused. This reduces the default height of the metadata section for an unsolved puzzle from 76 pixels to 48 pixels.

We continue to show correct answers in the metadata section by default because we consider it important to make it hard to miss that a puzzle has already been solved and what the answer was, and very few puzzles involve multiple answers (so the row is not a huge loss).

Fixes #1388.

Demo video:

Screen.Recording.2023-02-10.at.1.40.30.AM.mov

[zarvox]

I imagine this more as a draft of an idea than necessarily the final word on #1388, but it seemed worthwhile to have something tangible to play with rather than just trying to describe how I imagined it, and if we love it, then great. 🙂

I'd appreciate it if reviewers could (when they have time) actually download the branch and test it out locally, so as to answer the following:

1. How do the stacking-modal dynamics feel? I thought this was pretty reasonable, but I'm biased and it can be hard to tell from just a video if it will feel good or awkward to use.
2. Any styling suggestions/feedback?

[ebroder]

I think the stacking modals mostly feel fine to me on their own, but I will note that it makes the Google Sheets menu bar a fairly small target that's easy to overshoot by accident (something something Fitts' Law), and it can be a little annoying to recover from overshooting (when I overshot, I would often then trip the tag overlay, so had to move my cursor around a lot to get it all to clear)

Would we be better off with an expand/collapse triangle?

[zarvox]

I think the stacking modals mostly feel fine to me on their own, but I will note that it makes the Google Sheets menu bar a fairly small target that's easy to overshoot by accident (something something Fitts' Law), and it can be a little annoying to recover from overshooting (when I overshot, I would often then trip the tag overlay, so had to move my cursor around a lot to get it all to clear)

Hmmm, that's a reasonable point. On reflection, I mostly tested this on a page which happened to be a meta, where most of the space just above the Sheets menu bar has the same problem at HEAD today (you have to escape the related-puzzles popover) but I suppose it's a little bit more of a difference on puzzles with fewer tags to begin with -- the whole width of the metadata section vs just the width of the tags themselves.

That said: I find myself using the Sheets menu bar exceedingly sparingly when solving, so maybe that's not too bad? Almost all my interactions are through either the toolbars/dropdowns or right-click context menus.

Would we be better off with an expand/collapse triangle?

I think I'm somewhat motivated to avoid making this require a click, since I expect people will be unlikely to explore/discover anything that we hide behind a new expand/collapse triangle? Whereas with the mouseover I think people are pretty likely to discover what's behind it (especially since you will very likely pass the mouse over the hover target while navigating in general).

Perhaps another option is putting the tags in whatever space remains in the top row (as many as fit) and then when you mouse over that section of the top bar, the tags pop out? Then at least you have some warning/visible reminder of what to avoid mousing over to avoid triggering popovers (as we do at HEAD). Not sure how viable that is when we're space constrained at e.g. mobile widths though.