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,6 +207,8 @@ export const NumberComponent = React.memo((props: ButtonComponentProps) => {
   return (
     <div className={'component boolean'} id={parent_path.concat(name)}>
       <p>Render count: {renderCount.current}</p>
+      <div className="row">
+        <div className="col-2 d-flex">
           <InputGroup>
             <InputGroup.Text>{name}</InputGroup.Text>
             <Form.Control
@@ -217,20 +218,23 @@ export const NumberComponent = React.memo((props: ButtonComponentProps) => {
               name={name}
               onKeyDown={handleKeyDown}
             />
+          </InputGroup>
           <div className="d-flex flex-column">
             <Button
-            style={{ padding: '0.2em 8px', fontSize: '0.70rem' }}
+              style={{ padding: '0.2em 6px', fontSize: '0.70rem' }}
               // className="mb-1"
               variant="outline-secondary">
               +
             </Button>
             <Button
-            style={{ padding: '0.2em 8px', fontSize: '0.70rem' }}
+              style={{ padding: '0.2em 6px', fontSize: '0.70rem' }}
               variant="outline-secondary">
               -
             </Button>
           </div>
-      </InputGroup>
+        </div>
+      </div>
+
       {docString && (
         <OverlayTrigger placement="bottom" overlay={tooltip}>
           <Badge pill className="tooltip-trigger" bg="light" text="dark">