Regression: duplicated 'blue tick' icons in the closed captions menu

This CL addresses a regression where the 'blue tick' icon is duplicated or distorted
when we have longer subtitle labels (963184) or bigger font size (959094).

The root cause is that in https://chromium-review.googlesource.com/c/chromium/src/+/1588775
we updated both the overflow menu and the text track sizing to always be 200px.
And since the width is smaller, it exposed an existing bug
where the blue tick would not render properly due to not enough space
caused by subtitle label too long or the font size too large.

The blue-tick needs at least 18x18 pixels. Given the list-item
has padding and the checkbox of the blue-tick has margin, the max width of the <span>
for subtitle labels should be
200(menu)-58(left-padding)-16(right-padding)-15(left margin)-15(right margin)-18(blue tick)=78.
So the fix is to set the max width and update styles for the <span> accordingly.

Note it's not clear if 200px is enough for common use of subtitle labels.
A better design might be like Firefox where the width of the menu increases
as the length of subtitle labels increases up to around 500px. With that said,we might
need some telemetry or input from design team to justify the behavior change.

Bug: 963184, 959094
Change-Id: Ibe744976c70dc11cb0362d6b927ab3f579128a9e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1613706Reviewed-by: Tommy Steimel <steimel@chromium.org>
Commit-Queue: Alex Keng <shihken@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#660511}

third_party/blink/renderer/modules/media_controls/resources/modernMediaControls.css

@@ -927,6 +927,18 @@ label[pseudo="-internal-media-controls-overflow-menu-list-item"] div span {
   text-overflow: ellipsis;
 }
 
+label[pseudo="-internal-media-controls-text-track-list-item"] span {
+  line-height: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /*
+   * We need to make sure the blue tick has enough space to render. The blue tick needs at least 18px
+   * so the max width the span can go is 200(text-track-list) - 58(left-padding of list-item)
+   * - 16(right-padding of list-item) -30(left and right margin of the checkbox) - 18(blue tick) = 78px
+   */
+  max-width: 78px;
+}
+
 label[pseudo="-internal-media-controls-overflow-menu-list-item"] div span.subtitle {
   color: rgba(0,0,0,0.54);
 }