ui: Avoid overflowing track height

- Add overflow: hidden on track shell to avoid breaking the tracks
  layout.
- Hack in some font-size reduction in TypeScript so that longer track
  names are a big more legible. It's not a final solution but it's
  better than what we have at the moment.

Bug: 5776355
Change-Id: I4390e016740e2b65c01bf031c67307c72c9aa79d

ui/src/frontend/track_panel.ts

diff --git a/ui/src/frontend/track_panel.ts b/ui/src/frontend/track_panel.ts
index 9b3c3cc..1ab998f 100644
--- a/ui/src/frontend/track_panel.ts
+++ b/ui/src/frontend/track_panel.ts
@@ -31,6 +31,26 @@
   drawVerticalLineAtTime,
 } from './vertical_line_helper';
 
+function getTitleSize(title: string): string|undefined {
+  const length = title.length;
+  if (length > 55) {
+    return '9px';
+  }
+  if (length > 50) {
+    return '10px';
+  }
+  if (length > 45) {
+    return '11px';
+  }
+  if (length > 40) {
+    return '12px';
+  }
+  if (length > 35) {
+    return '13px';
+  }
+  return undefined;
+}
+
 function isPinned(id: string) {
   return globals.state.pinnedTracks.indexOf(id) !== -1;
 }
@@ -86,6 +106,9 @@
             'h1',
             {
               title: attrs.trackState.name,
+              style: {
+                'font-size': getTitleSize(attrs.trackState.name),
+              },
             },
             attrs.trackState.name,
             ('namespace' in attrs.trackState.config) &&