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 {
-
-
- {route.shortName} {longName}
-
+
+ {route.shortName} {longName}
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;
}