- Documentation and Vertical Lane Padding

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

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

@@ -21,7 +21,9 @@ const getSectionStyles = (props) => {
       display: inline-flex;
     `;
   }
-  return "";
+  return `
+    margin-bottom: 10px;
+  `;
 };
 
 export const GlobalStyle = createGlobalStyle`
@@ -75,10 +77,12 @@ export const StyleVertical = styled.div`
   .react-trello-column-header {
     text-align: left;
   }
+
   .smooth-dnd-container {
     // TODO ? This is the question. We need the same drag-zone we get in horizontal mode
     min-height: 50px; // Not needed, just for extra landing space
   }
+
   .react-trello-board {
     overflow-y: hidden !important;
   }
@@ -131,8 +135,7 @@ export const CustomPopoverContent = styled(PopoverContent)`
 `;
 
 export const BoardWrapper = styled.div`
-  background-color: #3179ba;
-  // TODO: This was defaulted to hidden, changed to accommodate board
+  background-color: #ffffff;
   overflow-y: scroll;
   padding: 5px;
   color: #393939;
@@ -152,8 +155,8 @@ export const Section = styled.section`
   margin: 2px 2px;
   position: relative;
   padding: 5px;
-  ${getSectionStyles};
   flex-direction: column;
+  ${getSectionStyles};
 `;
 
 export const LaneHeader = styled(Header)`
@@ -185,9 +188,6 @@ export const ScrollableLane = styled.div`
   min-width: 250px;
   overflow-x: hidden;
   align-self: center;
-  // TODO: This was commented out to match existing board style
-  //max-height: 90vh;
-  //margin-top: 10px;
   flex-direction: column;
   justify-content: space-between;
 `;