refactor: address pr feedback

Author: miles-grant-ibigroup

Diff for: lib/components/app/locale-selector.tsx

@@ -21,6 +21,12 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element | null => {
     getLanguageOptions(configLanguages)
   const intl = useIntl()
 
+  const onEnterOrSpace = (e: KeyboardEvent, action: () => void): void => {
+    if (e.key === 'Space' || e.key === 'Enter') {
+      action()
+    }
+  }
+
   // Only render if two or more languages are configured.
   return languageOptions ? (
     <Dropdown
@@ -45,7 +51,8 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element | null => {
           key={locale}
           lang={locale}
           onClick={() => setLocale(locale)}
-          onKeyPress={() => setLocale(locale)}
+          // @ts-expect-error TODO: repair this type. Handler is not guaranteed to have 'key'
+          onKeyPress={(e) => onEnterOrSpace(e, () => setLocale(locale))}
           // We are correct, not eslint: https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html
           // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
           role="option"

Diff for: lib/components/app/view-switcher.tsx

@@ -63,15 +63,15 @@ const ViewSwitcher = ({
       <Button
         aria-controls="view-switcher"
         bsStyle="link"
-        className={`${tripPlannerActive && 'active'}`}
+        className={`${tripPlannerActive ? 'active' : ''}`}
         onClick={_showTripPlanner}
       >
         <FormattedMessage id="components.BatchRoutingPanel.shortTitle" />
       </Button>
       <Button
         aria-controls="view-switcher"
         bsStyle="link"
-        className={`${routeViewerActive && 'active'}`}
+        className={`${routeViewerActive ? 'active' : ''}`}
         onClick={_showRouteViewer}
       >
         <FormattedMessage id="components.RouteViewer.shortTitle" />

Diff for: lib/components/mobile/mobile.css

@@ -20,21 +20,20 @@
 .otp .navbar .mobile-header {
   align-items: center;
   display: flex;
-  height: 60px;
+  height: 50px;
   justify-content: center;
   left: 50px;
-  max-width: 70%;
+  max-width: 90%;
   position: fixed;
   right: 50px;
   text-align: center;
-  top: -11px;
 }
 
 .otp .navbar .mobile-header-text {
   color: white;
   display: inline-block;
   font-size: 18px;
-  padding-top: 9px;
+  margin: 0;
 }
 
 @media (max-width: 768px) {

Diff for: lib/components/narrative/default/itinerary-summary.js

@@ -47,7 +47,7 @@ const Block = connect(mapStateToProps)(styled.div`
 
   span {
     display: ${(props) => (props.renderRouteNamesAndColors ? 'block' : 'none')};
-    margin-top: -3px;
+    align-self: center;
   }
 
   svg {