fix: Make scrolling, custom card templates and other styling work with fixed lane header

Author: rcdexta

src/components/Lane.js

@@ -145,7 +145,7 @@ class Lane extends Component {
     }
   }
 
-  renderDragContainer = () => {
+  renderDragContainer = (isDraggingOver) => {
     const {laneSortFunction, editable, tagStyle, cardStyle, draggable} = this.props
     const {addCardMode} = this.state
 
@@ -171,7 +171,7 @@ class Lane extends Component {
     ))
 
     return (
-      <ScrollableLane innerRef={this.laneDidMount}>
+      <ScrollableLane innerRef={this.laneDidMount} isDraggingOver={isDraggingOver}>
         <DraggableList>{cardList}</DraggableList>
         {editable && !addCardMode && this.renderAddCardLink()}
         {addCardMode && this.renderNewCard()}
@@ -215,7 +215,7 @@ class Lane extends Component {
               isDraggingOver={isDraggingOver}
               {...dropProvided.draggableProps}>
               {this.renderHeader()}
-              {this.renderDragContainer()}
+              {this.renderDragContainer(isDraggingOver)}
               {loading && <Loader />}
             </Section>
           )

src/styles/Base.js

@@ -39,20 +39,26 @@ export const Section = styled.section`
   position: relative;
   padding: 10px;
   min-width: 250px;
-  padding-bottom: ${props => (props.isDraggingOver ? '130px' : '30px')};
   display: flex;
   height: auto;
   max-height: 90%;
   flex-direction: column;
+  display: flex;
 `
 
 export const LaneHeader = styled(Header)`
-  margin-bottom: 10px;
+	z-index: 1000;
+	padding: 0px 5px;
+	margin-bottom: 0px;
 `
 
 export const ScrollableLane = styled.div`
-  flex: 1;
-  overflow-y: auto;
+	flex: 1;
+	overflow-y: auto;
+	overflow-x: hidden;
+	height: 100%;
+	padding-bottom: ${props => (props.isDraggingOver ? '130px' : '30px')};
+	margin-top: 10px;
 `
 
 export const Title = styled.span`
@@ -81,6 +87,7 @@ export const CardWrapper = styled.article`
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
   max-width: 250px;
+  min-width: 230px;
 `
 
 export const MovableCardWrapper = styled(CardWrapper)`

src/styles/Elements.js

@@ -5,7 +5,7 @@ export const DeleteWrapper = styled.div`
   text-align: center;
   position: absolute;
   top: -8px;
-  right: 0px;
+  right: -1px;
 `
 
 export const DeleteIcon = styled.span`

stories/CustomLaneStyling.story.js

@@ -75,6 +75,6 @@ storiesOf('Custom Templates', module).add(
       ]
     }
 
-    return <Board data={data} customLancustomLaneHeadereHeader={<CustomLaneHeader />} />
+    return <Board data={data} customLaneHeader={<CustomLaneHeader />} />
   })
 )