frontend: updating NumberComponent styling

frontend/src/components/NumberComponent.tsx

@@ -8,7 +8,6 @@ import {
   Button
 } from 'react-bootstrap';
 import { socket } from '../socket';
-import './NumberComponent.css';
 
 interface ButtonComponentProps {
   name: string;
@@ -208,29 +207,34 @@ export const NumberComponent = React.memo((props: ButtonComponentProps) => {
   return (
     <div className={'component boolean'} id={parent_path.concat(name)}>
       <p>Render count: {renderCount.current}</p>
-      <InputGroup>
+      <div className="row">
-        <InputGroup.Text>{name}</InputGroup.Text>
+        <div className="col-2 d-flex">
-        <Form.Control
+          <InputGroup>
-          type="text"
+            <InputGroup.Text>{name}</InputGroup.Text>
-          value={value}
+            <Form.Control
-          readOnly={readOnly}
+              type="text"
-          name={name}
+              value={value}
-          onKeyDown={handleKeyDown}
+              readOnly={readOnly}
-        />
+              name={name}
-        <div className="d-flex flex-column">
+              onKeyDown={handleKeyDown}
-          <Button
+            />
-            style={{ padding: '0.2em 8px', fontSize: '0.70rem' }}
+          </InputGroup>
-            // className="mb-1"
+          <div className="d-flex flex-column">
-            variant="outline-secondary">
+            <Button
-            +
+              style={{ padding: '0.2em 6px', fontSize: '0.70rem' }}
-          </Button>
+              // className="mb-1"
-          <Button
+              variant="outline-secondary">
-            style={{ padding: '0.2em 8px', fontSize: '0.70rem' }}
+              +
-            variant="outline-secondary">
+            </Button>
-            -
+            <Button
-          </Button>
+              style={{ padding: '0.2em 6px', fontSize: '0.70rem' }}
+              variant="outline-secondary">
+              -
+            </Button>
+          </div>
         </div>
-      </InputGroup>
+      </div>
+
       {docString && (
         <OverlayTrigger placement="bottom" overlay={tooltip}>
           <Badge pill className="tooltip-trigger" bg="light" text="dark">