fix(dropdown): Visually group suggestions together

[seafoox]

In the current version, each row in the left column (display sub categories) are separated with a line, even when two suggestions belong to the same sub-category.

Removing those, and making the interlines lighter in the right column, improves readability.
Makes it easier for the brain to understand that some items belong to a same sub-category.

Also disabled the mouse hover look'n'feel when hovering the left column.

[algobot]

By analyzing the blame information on this pull request, we identified @pixelastic and @redox to be potential reviewers

[Jerska]

Not sure it's such a good idea to remove the cursor: pointer on something clickable.

[seafoox]

Tried to disable the click using pointer-events: none; but didn't work. I guess we'd need to disable in the JS by checking if the parent of the click elements if different from the left column.

For now when a user click it redirect to the page of suggestion that is at the same level as the mouse. And not to the sub-category, like the user could expect.

[Jerska]

💯

[pixelastic]

Currently, clicks on the dropdown are intercepted by the js and "manually" redirect to the destination. This means that ctrl+click does not work. We'll have to fix this. I think @jerskouille worked on something similar already?

[Jerska]

I haven't, I don't correctly handle Ctrl+clicks on Zendesk either.
However, in instantsearch.js we solved that with links, we could try something like:

• have links in the markup to handle clicks + control clicks
• have the autocomplete:selected.event return if it's a click, and redirect as before if it's with the keyboard
  I'm not sure how to detect it though.