Extend the interactive area for pinning tracks

Previously when a tall track is pinned, the pin button may reside
outside the viewport and it is difficult to unpin the track in this
situation. This CL resolves this issue by extending the pin button's
vertical interactive area to the full height of the track.

Bug: 220138953
Change-Id: I12027d8f1f54fa9edeab08fffcbea839d1c68179

ui/src/frontend/track_panel.ts

diff --git a/ui/src/frontend/track_panel.ts b/ui/src/frontend/track_panel.ts
index baa816d..bb79035 100644
--- a/ui/src/frontend/track_panel.ts
+++ b/ui/src/frontend/track_panel.ts
@@ -101,6 +101,7 @@
             i: isPinned(attrs.trackState.id) ? STAR : STAR_BORDER,
             tooltip: isPinned(attrs.trackState.id) ? 'Unpin' : 'Pin to top',
             showButton: isPinned(attrs.trackState.id),
+            fullHeight: true,
           }),
           globals.state.currentSelection !== null &&
                   globals.state.currentSelection.kind === 'AREA' ?
@@ -265,13 +266,18 @@
   i: string;
   tooltip: string;
   showButton: boolean;
+  fullHeight?: boolean;
 }
 export class TrackButton implements m.ClassComponent<TrackButtonAttrs> {
   view({attrs}: m.CVnode<TrackButtonAttrs>) {
     return m(
         'i.material-icons.track-button',
         {
-          class: `${attrs.showButton ? 'show' : ''}`,
+          class: [
+            (attrs.showButton ? 'show' : ''),
+            (attrs.fullHeight ? 'full-height' : ''),
+          ].filter(Boolean)
+                     .join(' '),
           onclick: attrs.action,
           title: attrs.tooltip,
         },