fix(css): fix results/form styling for iPhone 5s

fixes ibi-group/trimet-mod-otp#108

Author: landonreed

lib/components/form/form.css

@@ -61,7 +61,7 @@
 .otp .settings-preview.compressed {
   height: 95px;
   text-align: center;
-  padding: 0px 15px;
+  padding: 0px;
 }
 
 .otp .settings-preview .selected-modes .some-selected-label {

lib/components/mobile/results-screen.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Button } from 'react-bootstrap'
+import { Button, Col, Row } from 'react-bootstrap'
 
 import DefaultMap from '../map/default-map'
 import ErrorMessage from '../form/error-message'
@@ -68,22 +68,22 @@ class MobileResultsScreen extends Component {
       )
 
     const locationsSummary = (
-      <div className='locations-summary' style={{ padding: '4px 8px' }}>
-        <div style={{ float: 'right' }}>
-          <Button
-            className='edit-search-button'
-            onClick={this._editSearchClicked}
-          >Edit</Button>
-        </div>
-        <div style={{ fontSize: '15px', lineHeight: '19px' }}>
+      <Row xs={12} className='locations-summary' style={{ padding: '4px 8px' }}>
+        <Col xs={8} sm={11} style={{ fontSize: '1.1em', lineHeight: '1.2em' }}>
           <div className='location'>
             <i className='fa fa-map-marker' /> { query.from ? query.from.name : '' }
           </div>
           <div className='location' style={{ marginTop: '2px' }}>
             <i className='fa fa-dot-circle-o' /> { query.to ? query.to.name : '' }
           </div>
-        </div>
-      </div>
+        </Col>
+        <Col xs={4} sm={1}>
+          <Button
+            className='edit-search-button'
+            onClick={this._editSearchClicked}
+          >Edit</Button>
+        </Col>
+      </Row>
     )
 
     if (error) {