From 71ce898310b8b2dc1edf53ce076b85b3b62cca45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mose=20M=C3=BCller?= <mosemueller@gmail.com>
Date: Wed, 2 Aug 2023 12:06:19 +0200
Subject: [PATCH] frontend: updating NumberComponent styling

---
 frontend/src/components/NumberComponent.tsx | 50 +++++++++++----------
 1 file changed, 27 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/NumberComponent.tsx b/frontend/src/components/NumberComponent.tsx
index 5aa031c..4008690 100644
--- a/frontend/src/components/NumberComponent.tsx
+++ b/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>
-        <InputGroup.Text>{name}</InputGroup.Text>
-        <Form.Control
-          type="text"
-          value={value}
-          readOnly={readOnly}
-          name={name}
-          onKeyDown={handleKeyDown}
-        />
-        <div className="d-flex flex-column">
-          <Button
-            style={{ padding: '0.2em 8px', fontSize: '0.70rem' }}
-            // className="mb-1"
-            variant="outline-secondary">
-            +
-          </Button>
-          <Button
-            style={{ padding: '0.2em 8px', fontSize: '0.70rem' }}
-            variant="outline-secondary">
-            -
-          </Button>
+      <div className="row">
+        <div className="col-2 d-flex">
+          <InputGroup>
+            <InputGroup.Text>{name}</InputGroup.Text>
+            <Form.Control
+              type="text"
+              value={value}
+              readOnly={readOnly}
+              name={name}
+              onKeyDown={handleKeyDown}
+            />
+          </InputGroup>
+          <div className="d-flex flex-column">
+            <Button
+              style={{ padding: '0.2em 6px', fontSize: '0.70rem' }}
+              // className="mb-1"
+              variant="outline-secondary">
+              +
+            </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">