Fix form-switch layout

app/frontend/src/javascript/components/form/abstract-form-item.tsx

@@ -10,13 +10,14 @@ export interface AbstractFormItemProps<TFieldValues> extends PropsWithChildren<A
   className?: string,
   disabled?: boolean|((id: string) => boolean),
   onLabelClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void,
+  inLine?: boolean,
 }
 
 /**
  * This abstract component should not be used directly.
  * Other forms components that are intended to be used with react-hook-form must extend this component.
  */
-export const AbstractFormItem = <TFieldValues extends FieldValues>({ id, label, tooltip, className, disabled, error, warning, rules, formState, onLabelClick, children }: AbstractFormItemProps<TFieldValues>) => {
+export const AbstractFormItem = <TFieldValues extends FieldValues>({ id, label, tooltip, className, disabled, error, warning, rules, formState, onLabelClick, inLine, children }: AbstractFormItemProps<TFieldValues>) => {
   const [isDirty, setIsDirty] = useState<boolean>(false);
   const [fieldError, setFieldError] = useState<{ message: string }>(error);
   const [isDisabled, setIsDisabled] = useState<boolean>(false);
@@ -59,14 +60,21 @@ export const AbstractFormItem = <TFieldValues extends FieldValues>({ id, label,
 
   return (
     <label className={`form-item ${classNames}`} onClick={handleLabelClick}>
-      {label && <div className='form-item-header'>
+      {(label && !inLine) && <div className='form-item-header'>
         <p>{label}</p>
         {tooltip && <div className="item-tooltip">
           <span className="trigger"><i className="fa fa-question-circle" /></span>
           <div className="content">{tooltip}</div>
         </div>}
       </div>}
+
       <div className='form-item-field'>
+        {inLine && <div className='form-item-header'><p>{label}</p>
+          {tooltip && <div className="item-tooltip">
+            <span className="trigger"><i className="fa fa-question-circle" /></span>
+            <div className="content">{tooltip}</div>
+          </div>}
+        </div>}
         {children}
       </div>
       {(isDirty && fieldError) && <div className="form-item-error">{fieldError.message}</div> }

app/frontend/src/javascript/components/form/form-switch.tsx

@@ -29,6 +29,7 @@ export const FormSwitch = <TFieldValues, TContext extends object>({ id, label, t
     <AbstractFormItem id={id} formState={formState} label={label}
                       className={`form-switch ${className || ''}`} tooltip={tooltip}
                       disabled={disabled}
+                      inLine
                       rules={rules} error={error} warning={warning}>
         <Controller name={id as FieldPath<TFieldValues>}
                     control={control}

app/frontend/src/stylesheets/modules/form/abstract-form-item.scss

@@ -12,6 +12,7 @@
     p {
       @include text-sm;
       margin: 0;
+      cursor: pointer;
       &::first-letter { text-transform: uppercase; }
     }
 

app/frontend/src/stylesheets/modules/form/form-switch.scss

@@ -1,28 +1,22 @@
 .form-switch {
-  position: relative;
-
   .form-item-header {
-    position: absolute;
-    top: 16px;
-    left: 16px;
-    padding-top: 2px;
-    width: fit-content;
+    margin-bottom: 0;
 
-    .item-tooltip {
-      margin-left: 12px;
-      position: unset;
+    & > *:not(:first-child) {
+      margin-left: 1.5rem;
+    }
 
-      .content {
-        right: unset;
-        left: 0;
-      }
+    .item-tooltip .content {
+      max-width: min(75vw, 30ch);
     }
   }
 
   .form-item-field {
     display: flex;
-    flex-direction: row-reverse;
-    background-color: white;
     padding: 16px;
+    background-color: white;
+    & > *:not(:first-child) {
+      margin-left: 2rem;
+    }
   }
 }