- Fix Horizontal mode lanes wrapping

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/trello-board/styles/Base.js

@@ -3,13 +3,15 @@ import styled, { createGlobalStyle, css } from "styled-components";
 
 const getBoardWrapperStyles = (props) => {
   if (props.orientation === "vertical") {
-    return `    `;
+    return ``;
   }
   if (props.orientation === "horizontal") {
+    // TODO: The white-space: nowrap; would be a good place to offer further customization
     return `
-      display: flex;
+          display: flex;
-      flex-direction: row;
+            flex-direction: row;
-      align-items: flex-start;
+            overflow-x: auto;
+            white-space: nowrap;
     `;
   }
   return "";
@@ -35,7 +37,7 @@ export const GlobalStyle = createGlobalStyle`
     -webkit-user-modify: read-write-plaintext-only;
     cursor: text;
   }
-  
+
   .comPlainTextContentEditable--has-placeholder::before {
     content: attr(placeholder);
     opacity: 0.5;
@@ -78,6 +80,7 @@ export const StyleHorizontal = styled.div`
     min-width: 250px;
     min-height: 25px;
   }
+
   .react-trello-lane.lane-collapsed {
     min-height: 15px;
   }
@@ -87,9 +90,11 @@ export const StyleVertical = styled.div`
   .react-trello-column-header {
     text-align: left;
   }
+
   .react-trello-card {
     flex: 0 1 auto;
   }
+
   .react-trello-board {
     display: flex;
   }