fix: Allowing lane width to expand based on card's width

#53

Author: rcdexta

src/components/Lane.js

@@ -172,7 +172,7 @@ class Lane extends Component {
 
     return (
       <ScrollableLane innerRef={this.laneDidMount} isDraggingOver={isDraggingOver}>
-        <DraggableList>{cardList}</DraggableList>
+        <span>{cardList}</span>
         {editable && !addCardMode && this.renderAddCardLink()}
         {addCardMode && this.renderNewCard()}
       </ScrollableLane>

src/styles/Base.js

@@ -38,12 +38,10 @@ export const Section = styled.section`
   margin: 5px 5px;
   position: relative;
   padding: 10px;
-  min-width: 250px;
-  display: flex;
+  display: inline-flex;
   height: auto;
   max-height: 90%;
   flex-direction: column;
-  display: flex;
 `
 
 export const LaneHeader = styled(Header)`
@@ -55,7 +53,9 @@ export const LaneHeader = styled(Header)`
 export const ScrollableLane = styled.div`
 	flex: 1;
 	overflow-y: auto;
+	min-width: 250px;
 	overflow-x: hidden;
+	display: inline-flex;
 	height: 100%;
 	padding-bottom: ${props => (props.isDraggingOver ? '130px' : '30px')};
 	margin-top: 10px;
@@ -66,16 +66,16 @@ export const Title = styled.span`
   font-size: 15px;
   line-height: 18px;
   cursor: grab;
-  width: 100%;
+  width: 70%;
 `
 
 export const RightContent = styled.span`
   width: 30%;
   text-align: right;
+  padding-right: 5px;
   font-size: 13px;
 `
 
-export const DraggableList = styled.div``
 
 export const CardWrapper = styled.article`
   border-radius: 3px;
@@ -96,16 +96,6 @@ export const MovableCardWrapper = styled(CardWrapper)`
   }
 `
 
-export const Placeholder = styled.section`
-  background-color: #ccc;
-  margin: 5px 0;
-  padding: 10px;
-  min-width: 226px;
-  height: 45px;
-  max-height: 95%;
-  overflow-y: auto;
-`
-
 export const CardHeader = styled(Header)`
   border-bottom: 1px solid #eee;
   padding-bottom: 6px;
@@ -157,12 +147,3 @@ export const AddCardLink = styled.a`
     text-decoration: underline;
   }
 `
-
-export const LaneWrapper = styled.div`
-  background-color: ${({isDraggingOver}) => (isDraggingOver ? 'cyan' : 'white')};
-  display: flex;
-  flex-direction: column;
-  opacity: ${({isDropDisabled}) => (isDropDisabled ? 0.5 : 'inherit')};
-  transition: background-color 0.1s ease, opacity 0.1s ease;
-  user-select: none;
-`

stories/AsyncLoad.story.js

@@ -4,7 +4,7 @@ import {storiesOf} from '@storybook/react'
 
 import Board from '../src'
 
-const data = require('./data.json')
+const data = require('./data/base.json')
 
 class AsyncBoard extends Component {
   state = {boardData: {lanes: []}}

stories/Base.story.js

@@ -4,7 +4,7 @@ import {storiesOf} from '@storybook/react'
 
 import Board from '../src'
 
-const data = require('./data.json')
+const data = require('./data/base.json')
 
 storiesOf('Basic Functions', module).add(
   'Full Board example',

stories/BoardStyling.story.js

@@ -6,7 +6,7 @@ import Board from '../src'
 
 import './board.css'
 
-const data = require('./data.json')
+const data = require('./data/base.json')
 
 storiesOf('Advanced Features', module).add(
   'Board Styling',

stories/DragDrop.story.js

@@ -4,7 +4,7 @@ import {storiesOf} from '@storybook/react'
 
 import Board from '../src'
 
-const data = require('./data.json')
+const data = require('./data/base.json')
 
 storiesOf('Drag-n-Drop', module).add(
   'Basic',

stories/EditableBoard.story.js

@@ -4,7 +4,7 @@ import {storiesOf} from '@storybook/react'
 
 import Board from '../src'
 
-const data = require('./data.json')
+const data = require('./data/base.json')
 
 class NewCard extends Component {
   updateField = (field, evt) => {

stories/Realtime.story.js

@@ -5,7 +5,7 @@ import update from 'immutability-helper'
 
 import Board from '../src'
 
-const data = require('./data.json')
+const data = require('./data/base.json')
 
 class RealtimeBoard extends Component {
     state = {boardData: data, eventBus: undefined}

stories/RestrictedLanes.story.js

@@ -4,7 +4,7 @@ import {storiesOf} from '@storybook/react'
 
 import Board from '../src'
 
-const data = require('./drag-drop.json')
+const data = require('./data/drag-drop.json')
 
 storiesOf('Drag-n-Drop', module).add(
   'Restrict lanes',

stories/Sort.story.js

@@ -4,7 +4,7 @@ import {storiesOf} from '@storybook/react'
 
 import Board from '../src'
 
-const data = require('./data-sort.json')
+const data = require('./data/data-sort.json')
 
 storiesOf('Basic Functions', module)
   .add(