AB#34352: Smaller terminal poster horizontal overflow error

src/components/routeDiagram/path.css

@@ -3,6 +3,10 @@
   color: var(--line-color);
 }
 
+.compact {
+  max-width: 300px;
+}
+
 .header {
   width: var(--left-width);
   border-right: var(--line-border);

src/components/routeDiagram/path.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 import Destinations from './destinations';
 import Stop from './stop';
@@ -66,7 +67,11 @@ class Path extends Component {
       <div className={styles.root}>
         <div className={styles.header} />
         {this.props.items.map((item, index) => (
-          <div key={index}>
+          <div
+            key={index}
+            className={classNames({
+              [styles.compact]: this.isLastStop && this.props.useCompactLayout,
+            })}>
             {item.type === 'stop' && (
               <Stop
                 {...item}
@@ -86,7 +91,7 @@ class Path extends Component {
             <div className={styles.footer} style={{ width: this.getWidth(this.props.children) }} />
             <div className={styles.children}>
               {this.props.children.map((branch, index) => (
-                <Path key={index} {...branch} />
+                <Path key={index} {...branch} useCompactLayout={this.props.useCompactLayout} />
               ))}
             </div>
           </div>
@@ -98,6 +103,7 @@ class Path extends Component {
 
 Path.defaultProps = {
   children: null,
+  useCompactLayout: false,
 };
 
 Path.propTypes = {
@@ -107,6 +113,7 @@ Path.propTypes = {
       destinations: PropTypes.arrayOf(PropTypes.object),
     }),
   ).isRequired,
+  useCompactLayout: PropTypes.bool,
 };
 
 // eslint-disable-next-line

src/components/routeDiagram/routeDiagram.css

@@ -6,6 +6,7 @@
   padding: 42px 3px 42px 42px;
   background: white;
   border-radius: var(--border-radius);
+  overflow: hidden;
 
   --left-width: 10px;
   --right-width: 200px;
@@ -16,6 +17,10 @@
   --line-border: var(--line-width) solid var(--line-color);
 }
 
+.narrow {
+  max-width: 1840px;
+}
+
 .a3 {
   padding: 15px 0px 5px 15px;
   border-radius: 30px;

src/components/routeDiagram/routeDiagram.js

@@ -8,41 +8,48 @@ import markerIcon from 'icons/marker.svg';
 import Path from './path';
 import styles from './routeDiagram.css';
 
-const RouteDiagram = props => (
-  <div
-    className={
-      !props.printAsA3
-        ? styles.root
-        : classNames(styles.root, styles.a3, props.useWide ? styles.useWide : '')
-    }>
+const RouteDiagram = props => {
+  const { printAsA3, useWide, useCompactLayout, tree } = props;
+  tree.useCompactLayout = useCompactLayout;
+  return (
     <div
-      className={classNames(styles.componentName, { [styles.componentNameA3]: props.printAsA3 })}>
-      <div className={!props.printAsA3 ? styles.title : styles.titleA3}>Linjojen reitit</div>
-      <div className={!props.printAsA3 ? styles.subtitle : styles.subtitleA3}>
-        Linjernas rutter / <span className={styles.italics}>Routes</span>
+      className={
+        !printAsA3
+          ? classNames(styles.root, { [styles.narrow]: useCompactLayout })
+          : classNames(styles.root, styles.a3, {
+              [styles.useWide]: useWide,
+            })
+      }>
+      <div className={classNames(styles.componentName, { [styles.componentNameA3]: printAsA3 })}>
+        <div className={!printAsA3 ? styles.title : styles.titleA3}>Linjojen reitit</div>
+        <div className={!printAsA3 ? styles.subtitle : styles.subtitleA3}>
+          Linjernas rutter / <span className={styles.italics}>Routes</span>
+        </div>
       </div>
-    </div>
-    <div className={styles.start}>
-      <InlineSVG src={markerIcon} className={styles.icon} />
-      <div className={classNames(styles.title, { [styles.titleA3]: props.printAsA3 })}>
-        Olet tässä&nbsp;&nbsp;
-        <span className={styles.subtitle}>Du är här&nbsp;&nbsp;</span>
-        <span className={styles.subtitle}>You are here</span>
+      <div className={styles.start}>
+        <InlineSVG src={markerIcon} className={styles.icon} />
+        <div className={classNames(styles.title, { [styles.titleA3]: printAsA3 })}>
+          Olet tässä&nbsp;&nbsp;
+          <span className={styles.subtitle}>Du är här&nbsp;&nbsp;</span>
+          <span className={styles.subtitle}>You are here</span>
+        </div>
       </div>
+      <Path {...tree} />
     </div>
-    <Path {...props.tree} />
-  </div>
-);
+  );
+};
 
 RouteDiagram.defaultProps = {
   printAsA3: false,
   useWide: false,
+  useCompactLayout: false,
 };
 
 RouteDiagram.propTypes = {
   tree: PropTypes.shape(Path.propTypes).isRequired,
   printAsA3: PropTypes.bool,
   useWide: PropTypes.bool,
+  useCompactLayout: PropTypes.bool,
 };
 
 export default RouteDiagram;

src/components/routeDiagram/routeDiagramContainer.js

@@ -126,16 +126,22 @@ const propsMapper = mapProps(props => {
     tree: routesToTree(routes, stopDetails, props.height, treeMaxWidth),
     printAsA3: props.printAsA3,
     useWide: props.useWide,
+    useCompactLayout: props.useCompactLayout,
   };
 });
 
 const hoc = compose(graphql(routeDiagramQuery), apolloWrapper(propsMapper));
 
 const RouteDiagramContainer = hoc(RouteDiagram);
 
+RouteDiagramContainer.defaultProps = {
+  useCompactLayout: false,
+};
+
 RouteDiagramContainer.propTypes = {
   stopIds: PropTypes.array.isRequired,
   date: PropTypes.string.isRequired,
+  useCompactLayout: PropTypes.bool,
 };
 
 export default RouteDiagramContainer;

src/components/stopPoster/terminalPoster.js

@@ -480,6 +480,7 @@ class TerminalPoster extends Component {
                           date={date}
                           routeFilter={this.props.routeFilter}
                           maxColumns={hasLeftColumn ? 6 : 8}
+                          useCompactLayout={isSmallTerminalPoster}
                         />
                       )}
                       {!useDiagram && tramImage && <TramDiagram svg={tramImage} />}

src/util/routes.js

@@ -65,7 +65,6 @@ function routesToTree(routes, { stopZone, shortId }, height = 'auto', width = MA
         type: 'stop',
         zone: stop.stopZone,
         routeSegments: stop.routeSegments.nodes.map(segment => {
-
           let trunkRoute;
           try {
             trunkRoute = segment.line.nodes[0].trunkRoute === '1';