The layout of the Navigator messes up with long entity titles

[cyberandy]

As depicted in the image below the layout changes for the last tile as the title of the related entity is too long "Orbita Microcosmica"

[wanbinkimoon]

IMO the fastest and more efficient solution is to add a fixed height to the h6 inside the div.wl-card-header.wl-entity-wrapper.
I suggest to add this code to the navigator styles:

.wl-card-header h6 {
  height: 46px;
}

46px is the height of the double line considering the actual font-size and line-height of this element.

[ziodave]

Is there a chance that we have titles spanning more than 2 lines? and what happens with a long word that doesn't fit?

[wanbinkimoon]

Yes, there is but it's very unlikely considering that the actual font fits an average of 16 characters per row in the actual width, this means that a 3 lines entity should have more than 32 characters divided at least in 3 words.

[ziodave]

👍🏼ok, that's fine, we're basically targeting the specific case.

[wanbinkimoon]

Another, more invasive and expansive, solution could be add a display: table to the wrap addressed as div.wl-carousel and structure the content as a table this will oblige every cell to be coherent with the height of the row in which is placed.

[ziodave]

This sounds better, any reason not to apply this solution?

[wanbinkimoon]

the only reason I see is that in this case we are considerably rewriting part of the code, this imply that we need to test again the behaviour of the widget in several contest, and considering that we are re-designing the whole widget we may apply those efforts in this way.

[ziodave]

It might also have an impact on the responsiveness of the widget, right?

[wanbinkimoon]

Yep, that is implied. I mean this is why we will have to re-write a consistent part of the actual code.

[wanbinkimoon]

On a second thought we could use this issue to implement display: grid and provide a consistent fallback considering that this feature is still widely unsupported, and most browser are still implementing it.
Here some docs regarding this:
• https://css-tricks.com/snippets/css/complete-guide-grid/
• https://www.youtube.com/watch?v=SRblTXsBPrY
• http://caniuse.com/#search=grid