Responsive design for UI

src/components/uniconfig/deviceTable/List.css

@@ -13,7 +13,19 @@
 
 .scrollWrapper {
     overflow: auto;
-    max-height: 700px;
+    max-height: 708px;
+}
+
+@media screen and (max-height: 1020px) {
+    .scrollWrapper {
+        height: 610px;
+    }
+}
+
+@media screen and (max-height: 900px) {
+    .scrollWrapper {
+        height: 565px;
+    }
 }
 
 .leftAligned1 {

src/components/uniconfig/deviceView/DeviceView.css

@@ -1,23 +1,51 @@
-.config {
+.container-props {
+    width: 1280px;
+}
+
+.config, .operational {
     width: 49%;
     float: left;
     padding: 20px;
     max-width: 700px;
     box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.1);
 }
 
-.container-props {
-    width: 1280px;
-}
-
 .operational {
-    width: 49%;
     float: right;
-    padding: 20px;
-    max-width: 700px;
-    box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.1);
 }
 
+@media screen and (max-width: 2100px) {
+    .container-props {
+        width: 1710px;
+    }
+
+    .operational, .config {
+        max-width: 880px;
+    }
+}
+
+
+@media screen and (max-width: 1910px) {
+    .container-props {
+        width: 1440px;
+    }
+
+    .operational, .config {
+        max-width: 820px;
+    }
+}
+
+@media screen and (max-width: 1440px) {
+    .container-props {
+        width: 1280px;
+    }
+
+    .operational, .config  {
+        max-width: 760px;
+    }
+}
+
+
 .options button {
     margin-left: 5px;
 }
@@ -31,7 +59,6 @@
 .leftAligned {
     float: left;
     text-align: left;
-
 }
 
 .rightAligned {
@@ -65,7 +92,6 @@
 }
 
 .floating-btn {
-    position: absolute;
     left: 30px;
     margin-top: 20px;
 }

src/components/uniconfig/deviceView/DeviceView.js

@@ -13,7 +13,6 @@ import {
   Row,
   Spinner
 } from "react-bootstrap";
-import DropdownMenu from "./dropdownMenu/DropdownMenu";
 import SnapshotModal from "./snapshotModal/SnapshotModal";
 import CustomAlerts from "../customAlerts/CustomAlerts";
 import ConsoleModal from "./consoleModal/ConsoleModal";
@@ -365,18 +364,18 @@ class DeviceView extends Component {
     return (
       <div>
         <header className="options">
-          <Button
-            className="round floating-btn noshadow"
-            onClick={() => {
-              this.props.history.push("/devices");
-            }}
-            variant="outline-light"
-          >
-            <i className="fas fa-chevron-left" />
-          </Button>
           <Container fluid className="container-props">
             <Row>
               <Col md={5} className="child">
+                <Button
+                  className="round noshadow leftAligned"
+                  onClick={() => {
+                    this.props.history.push("/devices");
+                  }}
+                  variant="outline-light"
+                >
+                  <i className="fas fa-chevron-left" />
+                </Button>
                 <Dropdown
                   onClick={this.getSnapshots.bind(this)}
                   className="leftAligned"

src/components/uniconfig/deviceView/editor/Codemirror.css

@@ -3,11 +3,23 @@
 .CodeMirror {
     /* Set height, width, borders, and global font properties here */
     font-family: monospace;
-    height: 500px;
+    height: 700px;
     color: black;
     direction: ltr;
 }
 
+@media screen and (max-height: 1020px) {
+    .CodeMirror {
+        height: 600px;
+    }
+}
+
+@media screen and (max-height: 900px) {
+    .CodeMirror {
+        height: 500px;
+    }
+}
+
 /* PADDING */
 
 .CodeMirror-lines {

src/components/workflows/WorkflowList/WorkflowDefs/WorkflowDefs.js

@@ -498,7 +498,7 @@ class WorkflowDefs extends Component {
             </Form.Group>
           </Col>
         </Row>
-        <div className="scrollWrapper" style={{ maxHeight: "650px" }}>
+        <div className="scrollWrapper">
           <Table ref={this.table}>
             <thead>
               <tr>

src/components/workflows/WorkflowList/WorkflowExec/WorkflowBulk/WorkflowBulk.js

@@ -59,11 +59,14 @@ class WorkflowBulk extends Component {
       >
         <Card>
           <Accordion.Toggle
-            onClick={() =>
+            onClick={() => {
               this.setState({
                 showBulk: this.state.showBulk === "0" ? null : "0"
-              })
-            }
+              });
+              document
+                .querySelector(".execTableWrapper.collapsible")
+                .classList.toggle("collapsed");
+            }}
             className="clickable"
             as={Card.Header}
             eventKey="0"
@@ -156,22 +159,23 @@ class WorkflowBulk extends Component {
                     variant="outline-primary"
                     value="pause"
                     onClick={e => this.performOperation(e)}
+                    style={{ marginBottom: "5px" }}
                   >
                     Pause
                   </Button>
                   <Button
                     variant="outline-primary"
                     value="resume"
                     onClick={e => this.performOperation(e)}
-                    style={{ marginLeft: "5px" }}
+                    style={{ marginLeft: "5px", marginBottom: "5px" }}
                   >
                     Resume
                   </Button>
                   <Button
                     variant="outline-primary"
                     value="retry"
                     onClick={e => this.performOperation(e)}
-                    style={{ marginLeft: "5px" }}
+                    style={{ marginLeft: "5px", marginBottom: "5px" }}
                   >
                     Retry
                   </Button>

src/components/workflows/WorkflowList/WorkflowExec/WorkflowExec.css

@@ -3,9 +3,18 @@
     text-align: left;
 }
 
-.execTableWrapper {
+.execTableWrapper.collapsible {
     overflow: auto;
-    max-height: 550px;
+    max-height: 643px;
+}
+
+@media screen and (max-height: 1020px) {
+    .execTableWrapper {
+        height: 500px;
+    }
+}
+.execTableWrapper.collapsed {
+    height: 500px;
 }
 
 .childWf {

src/components/workflows/WorkflowList/WorkflowExec/WorkflowExec.js

@@ -463,7 +463,11 @@ class WorkflowExec extends Component {
         refreshTable={
           this.state.allData
             ? this.props.fetchNewData.bind(this, 1, this.state.defaultPages)
-            : this.props.fetchParentWorkflows.bind(this, 1, this.state.defaultPages)
+            : this.props.fetchParentWorkflows.bind(
+                this,
+                1,
+                this.state.defaultPages
+              )
         }
         show={this.state.detailsModal}
       />
@@ -524,7 +528,7 @@ class WorkflowExec extends Component {
             <i className="fas fa-times" />
           </Button>
         </Row>
-        <div className="execTableWrapper">
+        <div className="execTableWrapper collapsible">
           <Table ref={this.table} striped={this.state.allData} hover size="sm">
             <thead>
               <tr>