Forms decide which of their child element take extra space.

src/components/AddImages/AddImages.css

@@ -1,4 +1,4 @@
-.imagesContainer {
+.root {
   width: 100%;
   min-height: 120px;
   padding-left: 0;

src/components/AddImages/AddImages.js

@@ -9,6 +9,7 @@
  */
 import React, { Component, PropTypes } from 'react';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc';
+import classNames from 'classnames';
 import { Promised } from '../../components';
 import { uuid } from '../../util/propTypes';
 import css from './AddImages.css';
@@ -76,9 +77,10 @@ const SortableImage = SortableElement(Thumbnail);
 
 // Create container where there are sortable images and passed children like "Add image" input etc.
 const SortableImages = SortableContainer(props => {
-  const { children, images } = props;
+  const { children, className, images } = props;
+  const classes = classNames(css.root, className);
   return (
-    <ol className={css.imagesContainer}>
+    <ol className={classes}>
       {images.map((image, index) => <SortableImage {...image} index={index} key={image.id} />)}
       {children}
     </ol>
@@ -92,11 +94,12 @@ const AddImages = props => {
   return <SortableImages axis="xy" {...props} />;
 };
 
-AddImages.defaultProps = { images: [] };
+AddImages.defaultProps = { className: null, images: [] };
 
 AddImages.propTypes = {
   images: array,
   children: node.isRequired,
+  className: string,
   onSortEnd: func.isRequired,
 };
 

src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css

@@ -5,6 +5,10 @@
   flex-direction: column;
 }
 
+.description {
+  flex-grow: 1;
+}
+
 .descriptionField {
   /* Font */
   font-family: inherit;

src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js

@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import { compose } from 'redux';
 import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
 import { intlShape, injectIntl } from 'react-intl';
+import classNames from 'classnames';
 import { enhancedField } from '../../util/forms';
 import { maxLength, required } from '../../util/validators';
 import { Button } from '../../components';
@@ -18,11 +19,12 @@ export class EditListingDescriptionFormComponent extends Component {
     // to avoid losing focus.
     // See: https://github.com/erikras/redux-form/releases/tag/v6.0.0-alpha.14
     this.EnhancedInput = enhancedField('input');
-    this.EnhancedTextArea = enhancedField('textarea');
+    this.EnhancedTextArea = enhancedField('textarea', { rootClassName: css.description });
   }
 
   render() {
     const {
+      className,
       disabled,
       handleSubmit,
       intl,
@@ -54,8 +56,9 @@ export class EditListingDescriptionFormComponent extends Component {
       id: 'EditListingDescriptionForm.descriptionRequired',
     });
 
+    const classes = classNames(css.root, className);
     return (
-      <form onSubmit={handleSubmit}>
+      <form className={classes} onSubmit={handleSubmit}>
         <Field
           autoFocus
           name="title"
@@ -87,12 +90,16 @@ export class EditListingDescriptionFormComponent extends Component {
   }
 }
 
-EditListingDescriptionFormComponent.defaultProps = { saveActionMsg: 'Next: location' };
+EditListingDescriptionFormComponent.defaultProps = {
+  className: null,
+  saveActionMsg: 'Next: location',
+};
 
 const { func, string } = PropTypes;
 
 EditListingDescriptionFormComponent.propTypes = {
   ...formPropTypes,
+  className: string,
   intl: intlShape.isRequired,
   onSubmit: func.isRequired,
   saveActionMsg: string,

src/containers/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap

@@ -1,5 +1,6 @@
 exports[`EditListingDescriptionForm matches snapshot 1`] = `
 <form
+  className=""
   onSubmit={[Function]}>
   <div
     className="">

src/containers/EditListingLocationForm/EditListingLocationForm.css

@@ -5,6 +5,10 @@
   flex-direction: column;
 }
 
+.building {
+  flex-grow: 1;
+}
+
 .submitButton {
   margin-top: 1rem;
 }

src/containers/EditListingLocationForm/EditListingLocationForm.js

@@ -3,6 +3,7 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { Field, reduxForm, formValueSelector, propTypes as formPropTypes } from 'redux-form';
 import { intlShape, injectIntl } from 'react-intl';
+import classNames from 'classnames';
 import * as propTypes from '../../util/propTypes';
 import { enhancedField } from '../../util/forms';
 import { autocompleteSearchRequired, autocompletePlaceSelected } from '../../util/validators';
@@ -18,11 +19,12 @@ export class EditListingLocationFormComponent extends Component {
     // to avoid losing focus.
     // See: https://github.com/erikras/redux-form/releases/tag/v6.0.0-alpha.14
     this.EnhancedLocationAutocompleteInput = enhancedField(LocationAutocompleteInput);
-    this.EnhancedInput = enhancedField('input');
+    this.EnhancedInput = enhancedField('input', { rootClassName: css.building });
   }
 
   render() {
     const {
+      className,
       disabled,
       handleSubmit,
       intl,
@@ -44,8 +46,10 @@ export class EditListingLocationFormComponent extends Component {
       id: 'EditListingLocationForm.buildingPlaceholder',
     });
 
+    const classes = classNames(css.root, className);
+
     return (
-      <form onSubmit={handleSubmit}>
+      <form className= {classes} onSubmit={handleSubmit}>
         <Field
           autoFocus
           name="location"

src/containers/EditListingLocationForm/__snapshots__/EditListingLocationForm.test.js.snap

@@ -1,5 +1,6 @@
 exports[`EditListingLocationForm matches snapshot 1`] = `
 <form
+  className=""
   onSubmit={[Function]}>
   <Field
     autoFocus={true}

src/containers/EditListingPhotosForm/EditListingPhotosForm.css

@@ -1,3 +1,14 @@
+.root {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.imagesField {
+  flex-grow: 1;
+}
+
 .addImageWrapper {
   float: left;
   position: relative;
@@ -48,5 +59,5 @@
 }
 
 .submitButton {
-  margin-top: 5rem;
+  margin-top: 1rem;
 }

src/containers/EditListingPhotosForm/EditListingPhotosForm.js

@@ -4,8 +4,16 @@ import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
 import { intlShape, injectIntl } from 'react-intl';
 import { isEqual } from 'lodash';
 import { arrayMove } from 'react-sortable-hoc';
-import { noEmptyArray } from '../../util/validators';
-import { AddImages, Button, Input, ValidationError } from '../../components';
+import classNames from 'classnames';
+import config from '../../config';
+import { noEmptyArray, required } from '../../util/validators';
+import {
+  AddImages,
+  Button,
+  Input,
+  StripeBankAccountToken,
+  ValidationError,
+} from '../../components';
 
 import css from './EditListingPhotosForm.css';
 
@@ -66,6 +74,7 @@ export class EditListingPhotosFormComponent extends Component {
 
   render() {
     const {
+      className,
       disabled,
       handleSubmit,
       images,
@@ -77,10 +86,12 @@ export class EditListingPhotosFormComponent extends Component {
 
     const imageRequiredMessage = intl.formatMessage({ id: 'EditListingPhotosForm.imageRequired' });
 
-    return (
-      <form onSubmit={handleSubmit}>
+    const classes = classNames(css.root, className);
 
-        <AddImages images={images} onSortEnd={this.onSortEnd}>
+    return (
+      <form className={classes} onSubmit={handleSubmit}>
+
+        <AddImages className={css.imagesField} images={images} onSortEnd={this.onSortEnd}>
           <Field
             accept={ACCEPT_IMAGES}
             component={RenderAddImage}

src/containers/EditListingPhotosForm/__snapshots__/EditListingPhotosForm.test.js.snap

@@ -1,7 +1,9 @@
 exports[`EditListingPhotosForm matches snapshot 1`] = `
 <form
+  className=""
   onSubmit={[Function]}>
   <AddImages
+    className={null}
     images={Array []}
     onSortEnd={[Function]}>
     <Field

src/containers/EditListingPricingForm/EditListingPricingForm.css

@@ -3,12 +3,14 @@
   height: 100%;
   display: flex;
   flex-direction: column;
+  flex-grow: 1;
 }
 
 .priceWrapper {
   display: flex;
   flex-direction: row;
   width: 100%;
+  flex-grow: 1;
 }
 
 .priceInput {
@@ -19,7 +21,8 @@
   flex-basis: 80px;
   font-size: 14px;
   line-height: 50px;
-  margin-left: 1rem;}
+  margin-left: 1rem;
+}
 
 .submitButton {
   margin-top: 1rem;

src/containers/EditListingPricingForm/EditListingPricingForm.js

@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import { compose } from 'redux';
 import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
 import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
+import classNames from 'classnames';
 import config from '../../config';
 import { enhancedField } from '../../util/forms';
 import { required } from '../../util/validators';
@@ -21,6 +22,7 @@ export class EditListingPricingFormComponent extends Component {
 
   render() {
     const {
+      className,
       disabled,
       handleSubmit,
       intl,
@@ -31,8 +33,10 @@ export class EditListingPricingFormComponent extends Component {
 
     const priceRequiredMessage = intl.formatMessage({ id: 'EditListingPricingForm.priceRequired' });
 
+    const classes = classNames(css.root, className);
+
     return (
-      <form onSubmit={handleSubmit}>
+      <form className={classes} onSubmit={handleSubmit}>
         <div className={css.priceWrapper}>
           <Field
             autoFocus

src/containers/EditListingPricingForm/__snapshots__/EditListingPricingForm.test.js.snap

@@ -1,5 +1,6 @@
 exports[`EditListingPricingForm matches snapshot 1`] = `
 <form
+  className=""
   onSubmit={[Function]}>
   <div
     className={undefined}>