Modal not working on iOS

web/dist/main.css

@@ -956,6 +956,10 @@ h5 {
   margin-bottom: 15px;
 }
 
+.contact-form-message textarea {
+  height: 300px;
+}
+
 .contact-form-footer {
   text-align: center;
   padding-top: 20px;
@@ -1013,6 +1017,15 @@ h5 {
   .contact-form-alert {
     text-align: center;
   }
+
+  .contact-form-message textarea {
+    height: 150px;
+  }
+  .image-dot {
+    width: 7px;
+    height: 7px;
+    margin: 0 3px;
+  }
 }
 
 .noselect {

web/src/components/ContactModal.js

@@ -119,7 +119,6 @@ export default class ContactModal extends React.Component {
               <textarea
                 onChange={this.onFieldChange.bind(this, 'message')}
                 value={message}
-                rows="14"
               />
             </div>
             <div className="contact-form-alert noselect">

web/src/components/Gallery.js

@@ -74,7 +74,7 @@ export default class Gallery extends React.Component {
 
             return (
               <div
-                key={img}
+                key={index}
                 onClick={this.onImageDotClick.bind(this, index)}
                 className={cls}
               />

web/src/components/ListingDetails.js

@@ -110,10 +110,6 @@ export default class ListingDetails extends React.Component {
           <div className="ld-footer" />
         </div>
 
-        {contactFormOpen ? <ContactModal
-          listingId={this.props.listing._id}
-          contact={this.props.contact}
-          dispatch={this.props.dispatch} /> : null}
       </div>
     )
   }

web/src/components/Main.js

@@ -2,6 +2,7 @@ import React from 'react'
 import Filters from './Filters'
 import Listings from './Listings'
 import ListingDetails from './ListingDetails'
+import ContactModal from './ContactModal'
 import {pacSelectFirst} from '../helpers/googleMaps'
 import {loadProperties, loadSeen, loadListing} from '../lib/api'
 import {handleMessage} from '../lib/handlers'
@@ -582,8 +583,14 @@ class Main extends React.Component {
       rightClass = 'right-shown'
     }
 
+    const {contactFormOpen} = this.state
+
     return (
       <div id="container">
+        {contactFormOpen ? <ContactModal
+          listingId={this.state.listing._id}
+          contact={this.state.contact}
+          dispatch={this.dispatch.bind(this)} /> : null}
         <div id="header">
           <a className="hamburger-menu">K</a>
           <span className="title">KIVI</span>