WEBDEV-5800 Fix 3-line truncation of list tiles in Safari (#220)

* Wrap truncated segments with inline element to fix Safari

* Remove margins that circumvent the fix

* Fix tests to work with added element

* Apply margins in a re-render because Safari is weird

* Workaround truncation approach for Safari

* Remove unnecessary wrapper elements

* Revert tests to original DOM structure

src/tiles/list/tile-list.ts

@@ -518,6 +518,12 @@ export class TileList extends LitElement {
         word-break: break-word;
         -webkit-line-clamp: 3; /* number of lines to show */
         line-clamp: 3;
+
+        /*
+         * Safari doesn't always respect the line-clamping rules above,
+         * so we add this to ensure these fields still get truncated
+         */
+        max-height: 60px;
       }
 
       #collections {

src/tiles/text-snippet-block.ts

@@ -114,6 +114,12 @@ export class TextSnippetBlock extends LitElement {
         padding-left: 15px;
         font-size: 1.4rem;
         line-height: 2rem;
+
+        /*
+         * Safari doesn't always respect the line-clamping rules,
+         * so we add this to ensure these fields still get truncated.
+         */
+        max-height: 6rem;
       }
 
       mark {