From 26d1e66a57771296fee3fcea403a9f97fc926019 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 28 Jan 2021 17:12:50 -0500
Subject: [PATCH 1/2] fix(viewers.css): Fix scrolling and overflow in route
 viewer.

---
 lib/components/viewers/viewers.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/lib/components/viewers/viewers.css b/lib/components/viewers/viewers.css
index b9ba9e68d..26ae730c2 100644
--- a/lib/components/viewers/viewers.css
+++ b/lib/components/viewers/viewers.css
@@ -32,7 +32,10 @@
 }
 
 .otp .route-viewer-body, .otp .stop-viewer-body, .otp .trip-viewer-body {
+  overflow-x: hidden;
   overflow-y: auto;
+}
+.otp .stop-viewer-body, .otp .trip-viewer-body {
   padding: 12px;
 }
 

From b84d17813fa5f808edee5b8d89d8feab201c862b Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 8 Feb 2021 19:37:59 -0500
Subject: [PATCH 2/2] improvement(RouteViewer): Render clipped long route names
 with ellipsis.

---
 lib/components/viewers/route-viewer.js | 38 ++++++++++++++------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/lib/components/viewers/route-viewer.js b/lib/components/viewers/route-viewer.js
index 68ef43a5a..6b19ec36a 100644
--- a/lib/components/viewers/route-viewer.js
+++ b/lib/components/viewers/route-viewer.js
@@ -113,13 +113,13 @@ const StyledRouteRow = styled.div`
 `
 
 const RouteRowButton = styled(Button)`
-  padding: 8px;
+  align-items: center;
+  display: flex;
+  padding: 6px;
   width: 100%;
 `
 
-const RouteRowElement = styled.div`
-  display: inline-block;
-  vertical-align: middle;
+const RouteRowElement = styled.span`
 `
 
 const OperatorImg = styled.img`
@@ -127,28 +127,30 @@ const OperatorImg = styled.img`
   margin-right: 8px;
 `
 
-const ModeIconElement = styled(RouteRowElement)`
+const ModeIconElement = styled.span`
+  display: inline-block;
+  vertical-align: bottom;
   height: 22px;
 `
 
-const RouteNameElement = styled(RouteRowElement)`
-  margin-top: 2px;
-`
-
-const StyledLabel = styled(Label)`
+const RouteNameElement = styled(Label)`
   background-color: ${props => (
-    props.backgroundColor === '#ffffff'
+    props.backgroundColor === '#ffffff' || props.backgroundColor === 'white'
       ? 'rgba(0,0,0,0)'
       : props.backgroundColor
   )};
   color: ${props => props.color};
+  flex: 0 1 auto;
+  font-size: medium;
+  font-weight: 400;
   margin-left: ${props => (
     props.backgroundColor === '#ffffff' || props.backgroundColor === 'white'
       ? 0
       : '8px'
   )};
-  font-size: medium;
-  font-weight: 400;
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `
 
 const RouteDetails = styled.div`
@@ -217,10 +219,12 @@ class RouteRow extends PureComponent {
           <ModeIconElement>
             <ModeIcon height={22} mode={getModeFromRoute(route)} width={22} />
           </ModeIconElement>
-          <RouteNameElement>
-            <StyledLabel backgroundColor={backgroundColor} color={color}>
-              <b>{route.shortName}</b> {longName}
-            </StyledLabel>
+          <RouteNameElement
+            backgroundColor={backgroundColor}
+            color={color}
+            title={`${route.shortName} ${longName}`}
+          >
+            <b>{route.shortName}</b> {longName}
           </RouteNameElement>
         </RouteRowButton>
         <VelocityTransitionGroup enter={{animation: 'slideDown'}} leave={{animation: 'slideUp'}}>