Lunie: Identicons in table validators doing weird things when the screen shrinks

[Bitcoinera]

Describe the bug

Whenever you reduce below a certain level the screen width in table validators some the identicons shrink in particular ways. Especially the ones with long validators names.
Also each one of these 'different' identicons shrinks differently, quicklier or less quickly.

To Reproduce





You can try. It might be something just happening in Brave?

Expected behavior

All identicons should shrink the same way, and no area around them should be displayed.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 18.04
• Browser: Brave
• Version: Version 1.0.1 Chromium: 78.0.3904.108 (Official Build) (64-bit)

Smartphone (please complete the following information):

• Device:
• OS:
• Browser
• Version

Additional context

[mariopino]

Hey @Bitcoinera! This is caused by the long addresses of that rows.

Adding min-height: 2.5rem and min-width: 2.5rem to li-validator-image class fix that behaviour though.

We can also add word-break: break-all; to li-validator-name class to be safe against very long names that could break the layout.

What do you think @jbibla ?

[jbibla]

Adding min-height: 2.5rem and min-width: 2.5rem to li-validator-image class fix that behaviour though.

yep, this should work!

i would also add this to the validator name:

  max-width: xxx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;