From 2128c6f3715f581ec70277aeeffbd4cd0d2d4fcc Mon Sep 17 00:00:00 2001
From: ofk <ofkjpn+github@gmail.com>
Date: Thu, 27 Sep 2018 14:55:42 +0900
Subject: [PATCH 1/2] Fix on AxisRangeConfigurator

---
 .../src/components/AxisRangeConfigurator.jsx  | 101 +++++++++---------
 1 file changed, 52 insertions(+), 49 deletions(-)

diff --git a/frontend/src/components/AxisRangeConfigurator.jsx b/frontend/src/components/AxisRangeConfigurator.jsx
index 8299d8ff..eea1d874 100644
--- a/frontend/src/components/AxisRangeConfigurator.jsx
+++ b/frontend/src/components/AxisRangeConfigurator.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Form, FormGroup, Label, Input } from 'reactstrap';
+import { Form, FormGroup, Col, Label, Input } from 'reactstrap';
 
 
 class AxisRangeConfigurator extends React.Component {
@@ -43,54 +43,57 @@ class AxisRangeConfigurator extends React.Component {
       <Form onSubmit={(e) => { e.preventDefault(); }}>
         <FormGroup tag="fieldset">
           <legend><small>{isMin ? 'Min' : 'Max'}</small></legend>
-          <div className="form-row">
-            <FormGroup check className="col-sm-3">
-              <Label check>
-                <Input
-                  type="radio"
-                  name="range-auto"
-                  value="auto"
-                  bsSize="sm"
-                  checked={rangeType === 'auto'}
-                  onChange={this.handleRangeTypeChange}
-                /> auto
-              </Label>
-            </FormGroup>
-            <FormGroup check className="col-sm-4">
-              <Label check>
-                <Input
-                  type="radio"
-                  name="range-data-min-or-max"
-                  value={isMin ? 'dataMin' : 'dataMax'}
-                  bsSize="sm"
-                  checked={rangeType === (isMin ? 'dataMin' : 'dataMax')}
-                  onChange={this.handleRangeTypeChange}
-                /> data {isMin ? 'min' : 'max'}
-              </Label>
-            </FormGroup>
-            <FormGroup check className="col-sm-5">
-              <Label check>
-                <Input
-                  type="radio"
-                  name="range-number"
-                  value="number"
-                  bsSize="sm"
-                  checked={rangeType === 'number'}
-                  onChange={this.handleRangeTypeChange}
-                />
-                <Input
-                  className={isNumberInvalid ? 'is-invalid' : ''}
-                  type="number"
-                  step="any"
-                  name="range-number-value"
-                  bsSize="sm"
-                  value={(rangeNumber == null || rangeNumber === '') ? '' : rangeNumber}
-                  disabled={rangeType !== 'number'}
-                  onChange={this.handleNumberChange}
-                />
-              </Label>
-            </FormGroup>
-          </div>
+          <FormGroup row>
+            <Col sm={{ size: 3 }}>
+              <FormGroup check className="text-nowrap">
+                <Label check>
+                  <Input
+                    type="radio"
+                    name="range-auto"
+                    value="auto"
+                    checked={rangeType === 'auto'}
+                    onChange={this.handleRangeTypeChange}
+                  /> auto
+                </Label>
+              </FormGroup>
+            </Col>
+            <Col sm={{ size: 4 }}>
+              <FormGroup check className="text-nowrap">
+                <Label check>
+                  <Input
+                    type="radio"
+                    name="range-data-min-or-max"
+                    value={isMin ? 'dataMin' : 'dataMax'}
+                    checked={rangeType === (isMin ? 'dataMin' : 'dataMax')}
+                    onChange={this.handleRangeTypeChange}
+                  /> data {isMin ? 'min' : 'max'}
+                </Label>
+              </FormGroup>
+            </Col>
+            <Col sm={{ size: 5 }}>
+              <FormGroup check>
+                <Label check>
+                  <Input
+                    type="radio"
+                    name="range-number"
+                    value="number"
+                    checked={rangeType === 'number'}
+                    onChange={this.handleRangeTypeChange}
+                  />
+                  <Input
+                    className={isNumberInvalid ? 'is-invalid' : ''}
+                    type="number"
+                    step="any"
+                    name="range-number-value"
+                    bsSize="sm"
+                    value={(rangeNumber == null || rangeNumber === '') ? '' : rangeNumber}
+                    disabled={rangeType !== 'number'}
+                    onChange={this.handleNumberChange}
+                  />
+                </Label>
+              </FormGroup>
+            </Col>
+          </FormGroup>
         </FormGroup>
       </Form>
     );

From 119a317fa0567178fbf5eb93b8670faf2a6a7dbe Mon Sep 17 00:00:00 2001
From: ofk <ofkjpn+github@gmail.com>
Date: Thu, 27 Sep 2018 15:45:17 +0900
Subject: [PATCH 2/2] Fix on LineConfigurator

---
 frontend/src/components/LineConfigurator.jsx | 32 +++++++++-----------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/LineConfigurator.jsx b/frontend/src/components/LineConfigurator.jsx
index 655c6c2c..52a87827 100644
--- a/frontend/src/components/LineConfigurator.jsx
+++ b/frontend/src/components/LineConfigurator.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Form, FormGroup, Label, Input, Collapse, Button, Col, Row } from 'reactstrap';
+import { Form, FormGroup, Label, Input, Collapse, Button, Col } from 'reactstrap';
 import { ChromePicker, GithubPicker } from 'react-color';
 import TruncatedResultName from './TruncatedResultName';
 import { lineColorGenerator } from '../utils';
@@ -124,22 +124,20 @@ class LineConfigurator extends React.Component {
             <Button onClick={this.togglePicker} size="sm" className="my-2">Toggle color picker</Button>
             <Button onClick={this.handleResetColorClick} size="sm" className="m-2">Reset color</Button>
           </FormGroup>
-          <FormGroup>
-            <Row>
-              <Label for="line-configurator-select-visibility" sm={{ size: 2 }}>visibility</Label>
-              <Col sm={{ size: 10 }}>
-                <FormGroup check>
-                  <Label check>
-                    <Input
-                      type="checkbox"
-                      id="line-configurator-select-visibility"
-                      checked={isVisible}
-                      onChange={this.handleVisibilityChange}
-                    />{' '}
-                  </Label>
-                </FormGroup>
-              </Col>
-            </Row>
+          <FormGroup row>
+            <Label for="line-configurator-select-visibility" className="col-sm-2">visibility</Label>
+            <Col sm={{ size: 10 }}>
+              <FormGroup check>
+                <Label check>
+                  <Input
+                    type="checkbox"
+                    id="line-configurator-select-visibility"
+                    checked={isVisible}
+                    onChange={this.handleVisibilityChange}
+                  />&nbsp;
+                </Label>
+              </FormGroup>
+            </Col>
           </FormGroup>
         </Form>
       </div>