frontend: styling other components

frontend/src/App.css

@@ -1,3 +1,7 @@
+body {
+  min-width: 576px;
+  max-width: 1200px;
+}
 input.instantUpdate {
   background-color: rgba(255, 0, 0, 0.1);
 }

frontend/src/components/AsyncMethodComponent.tsx

@@ -72,7 +72,7 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
 
   return (
     <div
-      className="col-5 align-items-center asyncMethodComponent"
+      className="align-items-center asyncMethodComponent"
       id={parent_path.concat('.' + name)}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>

frontend/src/components/EnumComponent.tsx

@@ -31,7 +31,7 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
       )}
       <DocStringComponent docString={docString} />
       <Row>
-        <Col className="col-5 d-flex align-items-center">
+        <Col className="d-flex align-items-center">
           <InputGroup.Text>{name}</InputGroup.Text>
           <Form.Select
             aria-label="Default select example"

frontend/src/components/MethodComponent.tsx

@@ -54,7 +54,7 @@ export const MethodComponent = React.memo((props: MethodProps) => {
 
   return (
     <div
-      className="col-5 align-items-center methodComponent"
+      className="align-items-center methodComponent"
       id={parent_path.concat('.' + name)}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>

frontend/src/components/NumberComponent.tsx

@@ -245,32 +245,30 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
         <p>Render count: {renderCount.current}</p>
       )}
       <DocStringComponent docString={docString} />
-      <div className="row">
-        <div className="d-flex">
-          <InputGroup>
-            {showName && <InputGroup.Text>{name}</InputGroup.Text>}
-            <Form.Control
-              type="text"
-              value={inputString}
-              disabled={readOnly}
-              name={parent_path.concat(name)}
-              onKeyDown={handleKeyDown}
-              onBlur={handleBlur}
-              className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''}
-            />
-            {unit && <InputGroup.Text>{unit}</InputGroup.Text>}
-          </InputGroup>
-          {!readOnly && (
-            <div className="d-flex flex-column">
-              <Button className="numberComponentButton" variant="outline-secondary">
-                +
-              </Button>
-              <Button className="numberComponentButton" variant="outline-secondary">
-                -
-              </Button>
-            </div>
-          )}
-        </div>
+      <div className="d-flex">
+        <InputGroup>
+          {showName && <InputGroup.Text>{name}</InputGroup.Text>}
+          <Form.Control
+            type="text"
+            value={inputString}
+            disabled={readOnly}
+            name={parent_path.concat(name)}
+            onKeyDown={handleKeyDown}
+            onBlur={handleBlur}
+            className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''}
+          />
+          {unit && <InputGroup.Text>{unit}</InputGroup.Text>}
+        </InputGroup>
+        {!readOnly && (
+          <div className="d-flex flex-column">
+            <Button className="numberComponentButton" variant="outline-secondary">
+              +
+            </Button>
+            <Button className="numberComponentButton" variant="outline-secondary">
+              -
+            </Button>
+          </div>
+        )}
       </div>
     </div>
   );

frontend/src/components/StringComponent.tsx

@@ -56,23 +56,19 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
         <p>Render count: {renderCount.current}</p>
       )}
       <DocStringComponent docString={docString} />
-      <div className="row">
-        <div className="col-5 d-flex">
-          <InputGroup>
-            <InputGroup.Text>{name}</InputGroup.Text>
-            <Form.Control
-              type="text"
-              value={inputString}
-              disabled={readOnly}
-              name={name}
-              onChange={handleChange}
-              onKeyDown={handleKeyDown}
-              onBlur={handleBlur}
-              className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''}
-            />
-          </InputGroup>
-        </div>
-      </div>
+      <InputGroup>
+        <InputGroup.Text>{name}</InputGroup.Text>
+        <Form.Control
+          type="text"
+          value={inputString}
+          disabled={readOnly}
+          name={name}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''}
+        />
+      </InputGroup>
     </div>
   );
 });