Add ellipsis to long properties in popup

[pilattebe]

When you click on an item, long property values can make the popup extend past the size of the screen.

A simple CSS change can make the line clip at 30 char which would be the easiest solution.

// Line 25 in preview.js
        for (let key in props) {
            //Skip geometry
            if (key == feat.getGeometryName()) {
                continue;
            }
            html += "<tr>";
            html += "<td class='popup-attribute-key'>" + key + "</td>";
// BEFORE
            // html += "<td class='popup-attribute-value'>" + props[key] + "</td>";
// AFTER
            html += "<td class='popup-attribute-value' style='max-width: 30ch;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;'>" + props[key] + "</td>";

            html += "</tr>";
        }

I hacked this together inline style but I'm sure someone more familiar with the extension will find the correct place to put CSS.

---

⚠️ Note: I think this piece of code contains a code injection vulnerability. So definitely don't open untrustworthy files with this extension as someone can put code in any of the properties and it will be run.

[pilattebe]

To be clear, I didn't add the vulnerability, I simply saw it and didn't fix it.

[jumpinjackie]

The feature property names and values are now cleaned with DOMPurify before they are concatted to the feature popup HTML