- Fixing horizontal checkbox

src/components/Selectors.tsx

@@ -58,9 +58,9 @@ export const DropdownMenu = (props: DropdownProps) => {
 export const ToggleSwitch = ({ value, onChange, ref, children }:
     { value: boolean, ref?: React.RefObject<HTMLInputElement>, onChange?: React.ChangeEventHandler, children: string }) => {
     return <p>
-        <span className="check-box">
-            <b>{children}</b>
-            <input ref={ref} className="check-box" defaultChecked={value} onChange={onChange} type='checkbox' />
+        <span className="check-box check-box-row">
+            <b>{children}:</b>
+            <input ref={ref} defaultChecked={value} onChange={onChange} type='checkbox' />
         </span>
     </p>;
 };

src/css/App.css

@@ -113,6 +113,7 @@ header {
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
   cursor: pointer;
   transition: 0.4s;
+  margin-bottom: revert;
 }
 
 .check-box input:checked[type="checkbox"] {
@@ -136,3 +137,9 @@ header {
 .check-box input:checked[type="checkbox"]::after {
   left: 50%;
 }
+
+.check-box-row{
+  display: flex;
+  gap: 2px;
+  align-items: center;
+}