fix(viewer): make viewer header sticky

Author: landonreed

lib/components/viewers/stop-viewer.js

@@ -12,8 +12,8 @@ import LocationIcon from '../icons/location-icon'
 import { setMainPanelContent, toggleAutoRefresh } from '../../actions/ui'
 import { findStop, findStopTimesForStop } from '../../actions/api'
 import { forgetStop, rememberStop, setLocation } from '../../actions/map'
-import { formatDuration, formatStopTime } from '../../util/time'
 import { routeComparator } from '../../util/itinerary'
+import { formatDuration, formatStopTime } from '../../util/time'
 
 class StopViewer extends Component {
   state = {}

lib/components/viewers/viewers.css

@@ -3,6 +3,9 @@
 .otp .stop-viewer-header, .otp .trip-viewer-header, .otp .route-viewer-header {
   background-color: #ddd;
   padding: 12px;
+  position: sticky; /* Ensure header bar sticks to top of scrolling div */
+  top: 0px;
+  z-index: 1; /* Ensure sticky header stays on top of viewer body */
 }
 
 .otp .stop-viewer-body, .otp .trip-viewer-body {