make responsive, moved toasts to top

src/modules/MQTT/components/SubscribeForm/index.js

@@ -52,19 +52,19 @@ const SubscribeToTopic = ({
 
                     <form>
                         <div className="form-row form-group">
-                            <div className="col-10">
+                            <div className="col-12 col-md-10">
                                 <label className="font-weight-bold">Subscription url</label>
                                 <Field name="url" component="input" type="text" className="form-control"
                                        placeholder="protocol://host:port/"/>
                             </div>
                         </div>
-                        <div className="form-row">
-                            <div className="col-7">
+                        <div className="form-row d-flex flex-column flex-sm-row">
+                            <div className="col-12 col-md-7">
                                 <label className="font-weight-bold">Subscription topic</label>
                                 <Field name="topic" component="input" type="text" className="form-control"
                                        placeholder="Specify a topic to subscribe to, e.g. myTopic/1"/>
                             </div>
-                            <div className="form-group col-3">
+                            <div className="form-group col-12 col-md-3">
                                 <label className="font-weight-bold">Max message capture</label>
                                 <Field name="maxMessageCapture" component="input" type="number"
                                        className="form-control"/>
@@ -72,7 +72,7 @@ const SubscribeToTopic = ({
                                     Configure how many messages are kept for each topic subscription.
                                 </small>
                             </div>
-                            <div className="col-2">
+                            <div className="col-12 col-md-2">
                                 <button onClick={() => {
                                     startListeningTopic(url, topic)
                                 }}
@@ -117,13 +117,12 @@ export default styled(reduxForm({
 
   margin-bottom: 15px;
   
-  
   > button {
     padding: 0;
   }
   form {
     >.form-row {
-      >.col-2 {
+      > div {
         >.btn {
           margin-top: 32px;
         }

src/modules/MQTT/components/SubscriptionView/index.js

@@ -10,6 +10,10 @@ const MessageContent = styled.div`
   width: 100%;
   padding: 5px 10px 5px 10px;
   overflow-y: auto;
+  white-space: pre;
+  min-height: 60px;
+  display: flex;
+  align-items: center;
 `;
 const Message = styled.div`
   border: 1px solid #ccc;

src/modules/MQTT/containers/SubscribeToTopic/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import {connect} from 'react-redux';
 import _ from 'lodash';
 import {connect as mqttConnect, toggleMqttForm} from '../../../../actions/mqtt';
-
 import SubscribeToTopicView from '../../components/SubscribeForm';
 
 const mapStateToProps = ({mqtt, form}) => {

src/modules/UIKit/containers/Main.js

@@ -14,7 +14,7 @@ class Main extends React.Component {
 
         return (
             <div className={classNames('UIKit-Main container-fluid', this.props.className)}>
-                <ToastContainer hideProgressBar newestOnTop closeButton={false} toastClassName="UIKit-Toast" bodyClassName="UIKit-Toast-Body" position="bottom-right"/>
+                <ToastContainer hideProgressBar newestOnTop closeButton={false} toastClassName="UIKit-Toast" bodyClassName="UIKit-Toast-Body" position="top-right"/>
                 <div className="row">
                     <Header/>
                 </div>

src/reducers/mqtt.js

@@ -55,7 +55,8 @@ export default (state = {
             return {
                 ...state,
                 isConnected: true,
-                isConnectInProcess: false
+                isConnectInProcess: false,
+                displayForm: false
             };
         case MQTT_DISCONNECTED:
             return {