Properly resize/scroll account selection tree

static/accounts.js

@@ -362,7 +362,8 @@ const AccountTreeNode = React.createClass({
 
 const AccountTree = React.createClass({
 	getInitialState: function() {
-		return {selectedAccount: null};
+		return {selectedAccount: null,
+			height: 0};
 	},
 	handleSelect: function(account) {
 		this.setState({selectedAccount: account});
@@ -370,6 +371,15 @@ const AccountTree = React.createClass({
 			this.props.onSelect(account);
 		}
 	},
+	resize: function() {
+		var div = React.findDOMNode(this);
+		this.setState({height: div.parentElement.clientHeight - 73});
+	},
+	componentDidMount: function() {
+		this.resize();
+		var self = this;
+		$(window).resize(function() {self.resize();});
+	},
 	render: function() {
 		var accounts = this.props.accounts;
 
@@ -382,8 +392,10 @@ const AccountTree = React.createClass({
 					onSelect={this.handleSelect}/>));
 		}
 
+		var style = {height: this.state.height + "px"};
+
 		return (
-			<div className="accounttree-root">
+			<div className="accounttree-root" style={style} >
 				{children}
 			</div>
 		);
@@ -443,8 +455,8 @@ const AccountsTab = React.createClass({
 		var disabled = (this.state.selectedAccount == null) ? "disabled" : "";
 
 		return (
-			<Grid fluid><Row>
-				<Col xs={2}>
+			<Grid fluid className="fullheight"><Row className="fullheight">
+				<Col xs={2} className="fullheight account-column">
 					<AddEditAccountModal
 						show={this.state.creatingNewAccount}
 						initialParentAccount={this.state.selectedAccount}
@@ -471,7 +483,7 @@ const AccountsTab = React.createClass({
 					<AccountTree
 						accounts={accounts}
 						onSelect={this.handleAccountSelected}/>
-					<ButtonGroup className="pull-right">
+					<ButtonGroup className="account-buttongroup">
 						<Button onClick={this.handleNewAccount} bsStyle="success">
 							<Glyphicon glyph='plus-sign' /></Button>
 						<Button onClick={this.handleEditAccount}
@@ -481,7 +493,7 @@ const AccountsTab = React.createClass({
 								bsStyle="danger" disabled={disabled}>
 							<Glyphicon glyph='trash' /></Button>
 					</ButtonGroup>
-				</Col><Col xs={10}>
+				</Col><Col xs={10} className="fullheight transactions-column">
 					blah
 				</Col>
 			</Row></Grid>

static/stylesheet.css

@@ -54,3 +54,24 @@ div.accounttree-root div {
 .accounttree-name {
 	padding: 3px;
 }
+
+.accounttree-root {
+	display: block;
+	width: 100%;
+	height: 100%-100px;
+	overflow: auto;
+}
+.account-column {
+	padding: 15px 15px 43px 15px;
+	border-right: 1px solid #DDD;
+	border-left: 1px solid #DDD;
+}
+.account-buttongroup {
+	position: absolute;
+	right: 15px;
+	bottom: 15px;
+}
+.transactions-column {
+	padding: 15px;
+	border-right: 1px solid #DDD;
+}

static/ui.js

@@ -553,7 +553,7 @@ const MoneyGoApp = React.createClass({
 		} else {
 			if (this.state.user.isUser())
 				mainContent =
-					<TabbedArea defaultActiveKey='1' className="flex-container">
+					<TabbedArea defaultActiveKey='1' className="">
 						<TabPane tab="Accounts" eventKey='1' className="fullheight">
 						<AccountsTab
 							className="fullheight"