From b0a5f2d9982fecadd8e0daab90f66b534a1f2d46 Mon Sep 17 00:00:00 2001
From: Dave Richer <dave@imexsystems.ca>
Date: Tue, 18 Jun 2024 15:31:56 -0400
Subject: [PATCH] - Fix Horizontal mode lanes wrapping

Signed-off-by: Dave Richer <dave@imexsystems.ca>
---
 client/src/components/trello-board/styles/Base.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/client/src/components/trello-board/styles/Base.js b/client/src/components/trello-board/styles/Base.js
index 670f95599..e79e3c391 100644
--- a/client/src/components/trello-board/styles/Base.js
+++ b/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;
-      flex-direction: row;
-      align-items: flex-start;
+          display: flex;
+            flex-direction: row;
+            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;
   }