Popup layout issues: grey rows extend beyond popup balloon

[zarino]

When text in the popup is of a certain length, the table seems to extend (in this case) 20px beyond the edge of the popup, resulting in weird grey bars.

The usual fixes for limiting a table's width don't seem to work:

.table {
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
}

The cheat's solution would be to set overflow:hidden on the table's parent, .leaflet-popup-content, but then the cell content collides with the edge of the popup.

I think it's being caused by the truncated link on the second line. Making that shorter fixes the problem.

Another solution, then, might be to remove the RegExp truncation, and instead use:

.table a {
  display: block;
  width: 80%; /* percentages don't work */
  width: 200px;
  overflow: hidden;
  text-overflow: elipsis;
}

But then you're still stuck with the random 200px width, rather than one based on the width of the parent.