Review: the empty Add a team list says No teams in full, not cut off (#845)

studio/src/strings.js

@@ -2505,7 +2505,8 @@ export const STRINGS = {
     PICK_NO_PLAYERS: 'No HLTV highlights in the queue',
     PICK_ADD_TEAM: 'Add a team…',
     PICK_ADD_TEAM_TITLE: 'Adds every player of a team from the Teams list: whoever played on its side in an HLTV demo, or has its tag in their name.',
-    PICK_NO_TEAMS: 'No teams in the HLTV demos',
+    // Short enough for the list's fixed 160 px; its tooltip says where teams come from.
+    PICK_NO_TEAMS: 'No teams',
     pickTeamOption: (name, count) => `${name} (${count} player${count === 1 ? '' : 's'})`,
     PICK_NONE: 'Nobody picked yet',
     PICK_REMOVE: 'Take this player out',

studio/tests/e2e/review-hltv.html

@@ -26,8 +26,9 @@
     <select id="review-hltv-select"></select>
   </label>
   <span id="review-hltv-pick" class="review-hltv-pick" hidden>
-    <select id="review-hltv-add-player"></select>
-    <select id="review-hltv-add-team"></select>
+    <!-- index.html's padding and font size, so a test can tell whether a line fits. -->
+    <select id="review-hltv-add-player" style="padding: 3px 6px; font-size: 12px;"></select>
+    <select id="review-hltv-add-team" style="padding: 3px 6px; font-size: 12px;"></select>
   </span>
   <select id="review-order-select"><option value="time">Chronological</option></select>
   <span id="review-hltv-chips" class="review-hltv-chips review-hltv-chips-row" hidden></span>

studio/tests/e2e/review-hltv.spec.js

@@ -62,6 +62,21 @@ test.describe('Review: HLTV players', () => {
     const add = page.locator('#review-hltv-add-player');
     await expect(add).toBeDisabled();
     await expect(add.locator('option')).toHaveText(['No HLTV highlights in the queue']);
+    await expect(page.locator('#review-hltv-add-team option')).toHaveText(['No teams']);
+    // Both lists' fixed widths show the whole line beside the ~12 px arrow
+    // (#845: the team list cut "No teams in the HLTV demos" short).
+    const cut = await page.evaluate(() => {
+      const ctx = document.createElement('canvas').getContext('2d');
+      return [...document.querySelectorAll('#review-hltv-add-player, #review-hltv-add-team')]
+        .filter((list) => {
+          const css = getComputedStyle(list);
+          ctx.font = `${css.fontSize} ${css.fontFamily}`;
+          const room = list.clientWidth - parseFloat(css.paddingLeft) - parseFloat(css.paddingRight) - 12;
+          return ctx.measureText(list.options[0].text).width > room;
+        })
+        .map((list) => list.options[0].text);
+    });
+    expect(cut).toEqual([]);
     // What main.js's updateDemoFooter does after a scan.
     await page.evaluate(() => { window.__emptyQueue(false); window.__pick.refresh(); });
     await expect(add).toBeEnabled();