Datamapper small bugfixes

src/main/frontend/app/components/datamapper/forms/add-conditions-form.tsx

@@ -61,6 +61,7 @@ function AddConditionForm({ sources, onSave, conditionToEdit }: Readonly<AddCond
       <div className="mb-4 flex flex-col">
         <label className="mb-1">Condition type:</label>
         <Dropdown
+          className="max-w-55"
           value={condition.type?.name ?? ''}
           onChange={(event) => {
             const conditionType = conditionsConfig.conditions.find((condition) => condition.name === event) ?? null
@@ -161,7 +162,7 @@ function ConditionInputField({
       <div className="mb-2 flex flex-col">
         <label className="mb-1">{inputConfig.label}</label>
         <Dropdown
-          className="mb-4"
+          className="mb-4 max-w-55"
           value={selectedIsDefault ? 'defaultValue' : (value?.sourceId ?? '')}
           onChange={handleSourceChange}
           options={Object.fromEntries([
@@ -208,6 +209,7 @@ function ConditionInputField({
       <div className="mb-2 flex flex-col">
         <label className="mb-1">{operatorConfig.label}</label>
         <Dropdown
+          className="max-w-55"
           value={value?.value ?? ''}
           onChange={(val) => onChange({ type: 'operator', value: val })}
           options={Object.fromEntries(operatorConfig.allowedValues.map((option) => [option, option]))}

src/main/frontend/app/components/datamapper/forms/add-field-form.tsx

@@ -100,7 +100,7 @@ function AddFieldForm({ fieldType, onSave, parents, formatDefinition, initialDat
   }
 
   return (
-    <div className="text-foreground">
+    <div className="text-foreground max-w-55">
       <h1 className="mb-2 text-xl font-bold">
         {initialData ? 'Edit' : 'Add'} {fieldType} property
       </h1>
@@ -109,6 +109,7 @@ function AddFieldForm({ fieldType, onSave, parents, formatDefinition, initialDat
         <>
           <label htmlFor="parentId">Parent</label>
           <Dropdown
+            className="max-w-55"
             id="parentId"
             value={parentId}
             onChange={(e) => setParent(e)}
@@ -121,6 +122,7 @@ function AddFieldForm({ fieldType, onSave, parents, formatDefinition, initialDat
 
       <label htmlFor="variableType">Variable Type:</label>
       <Dropdown
+        className="max-w-55"
         id="variableType"
         value={variableType}
         onChange={(value) => setVariableType(value)}
@@ -135,6 +137,7 @@ function AddFieldForm({ fieldType, onSave, parents, formatDefinition, initialDat
         <label htmlFor="defaultValue">Default value:</label>
         {defaultValueInputType === 'boolean' ? (
           <Dropdown
+            className="max-w-55"
             id="defaultValue"
             value={defaultValue}
             onChange={(value: string) => setDefaultValue(value)}

src/main/frontend/app/components/datamapper/forms/add-mapping-form.tsx

@@ -119,7 +119,7 @@ function AddMappingForm({ onSave, sources, targets, initialData }: MappingModalP
 
   const isFormIncomplete = sourceIds.some((id) => !id) || !targetId || !output
 
-  const scrollable = 'flex-1 min-h-0 overflow-y-auto space-y-2'
+  const scrollable = 'flex-1 min-h-0 overflow-y-auto space-y-2 max-w-55 truncate'
 
   return (
     <div className="text-foreground mx-auto flex max-h-[90vh] min-h-0 w-full max-w-225 flex-col">
@@ -136,6 +136,7 @@ function AddMappingForm({ onSave, sources, targets, initialData }: MappingModalP
               {sourceIds.map((id, value) => (
                 <div key={value} className="flex items-center gap-2">
                   <Dropdown
+                    className="max-w-45"
                     id={value.toString()}
                     value={id}
                     onChange={(event) => updateArrayItem(setSourceIds, value, event)}
@@ -163,7 +164,7 @@ function AddMappingForm({ onSave, sources, targets, initialData }: MappingModalP
               {mutations.map((mutation) => (
                 <div key={mutation.id} className="rounded border p-2">
                   <div className="flex items-center justify-between">
-                    <span className="max-w-40 font-semibold break-words">{mutation.name}</span>
+                    <span className="max-w-40 truncate font-semibold">{mutation.name}</span>
                     <div className="flex gap-2">
                       <EditButton
                         onClick={() => {
@@ -196,7 +197,7 @@ function AddMappingForm({ onSave, sources, targets, initialData }: MappingModalP
               {conditions.map((condition) => (
                 <div key={condition.id} className="rounded border p-2">
                   <div className="flex items-center justify-between">
-                    <span className="font-semibold">{condition.name}</span>
+                    <span className="truncate font-semibold">{condition.name}</span>
                     <div className="flex gap-2">
                       <EditButton
                         onClick={() => {
@@ -229,6 +230,7 @@ function AddMappingForm({ onSave, sources, targets, initialData }: MappingModalP
         <div className="flex flex-col gap-1">
           <label className="text-muted-foreground text-sm font-semibold">Output</label>
           <Dropdown
+            className="max-w-50"
             value={output}
             onChange={setOutput}
             options={Object.fromEntries(
@@ -243,6 +245,7 @@ function AddMappingForm({ onSave, sources, targets, initialData }: MappingModalP
           <label className="text-muted-foreground text-sm font-semibold">Target</label>
 
           <Dropdown
+            className="max-w-50"
             value={targetId}
             onChange={setTargetId}
             options={Object.fromEntries(targets.map((target) => [target.id, `${target.label} (${target.type})`]))}
@@ -259,6 +262,7 @@ function AddMappingForm({ onSave, sources, targets, initialData }: MappingModalP
 
         {isConditional && (
           <Dropdown
+            className="max-w-115 p-2"
             value={selectedConditional?.id ?? ''}
             onChange={(e) => setSelectedConditional(conditions.find((condition) => condition.id === e) ?? null)}
             options={Object.fromEntries(conditions.map((condition) => [condition.id, condition.name]))}

src/main/frontend/app/components/datamapper/forms/add-mutation-form.tsx

@@ -43,7 +43,7 @@ function AddMutationForm({
   }
 
   return (
-    <div className="text-foreground border-black">
+    <div className="text-foreground max-w-55 border-black">
       <h1 className="mb-2 text-xl font-bold">Add Mutation</h1>
 
       <label>Mutation name:</label>
@@ -55,6 +55,7 @@ function AddMutationForm({
 
       <label>Mutation type:</label>
       <Dropdown
+        className="max-w-55"
         value={mutation.mutationType?.name ?? ''}
         onChange={(e) => {
           const mutationType = mutations.mutations.find((mutationToFind) => mutationToFind.name === e) ?? null
@@ -201,15 +202,18 @@ function MutationInputField({
   }
 
   return (
-    <div className="flex items-start gap-2">
-      <div className="flex-1">
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center gap-2">
         {mutationInput.label && <label className="mb-1 block">{mutationInput.label}</label>}
+        {showDelete && onDelete && <DeleteButton onClick={onDelete} />}
+      </div>
 
+      <div>
         {mutationInput.type === 'source' && (
           <Dropdown
             value={value.sourceId ?? ''}
             onChange={handleSourceChange}
-            className="mb-4"
+            className="mb-4 max-w-55"
             options={Object.fromEntries([
               ...(mutationInput.allowDefaultValue ? [['defaultValue', 'defaultValue']] : []),
               ...sources.map((source) => [source.id, source.label]),
@@ -229,8 +233,6 @@ function MutationInputField({
           />
         )}
       </div>
-
-      {showDelete && onDelete && <DeleteButton onClick={onDelete} />}
     </div>
   )
 }

src/main/frontend/app/components/datamapper/react-flow/mapping-node.tsx

@@ -26,7 +26,7 @@ function MappingNode({ id, data, onClick, onDelete, onEdit }: MappingNodePropert
     >
       {/* Left: Label */}
       <div className="group/hoverInfoGroup flex flex-1 items-center overflow-hidden">
-        <HoverInfo info={data.outputLabel ?? ''} className="-translate-y-10!" />
+        <HoverInfo info={data.outputLabel ?? ''} className="-translate-x-15! -translate-y-8!" />
 
         <div className="truncate text-xs text-white drop-shadow-sm">{data.outputLabel}</div>
       </div>

src/main/frontend/app/components/inputs/dropdown.tsx

@@ -184,7 +184,7 @@ export default function Dropdown({
             isOpen ? 'bg-selected' : 'hover:bg-hover',
           )}
         >
-          <span className={clsx('text-foreground block truncate sm:text-sm', !selectedValue && 'text-gray-400')}>
+          <span className={clsx('text-foreground flex-1 truncate sm:text-sm', !selectedValue && 'text-gray-400')}>
             {getSelectedLabel()}
           </span>
           <AltArrowDownIcon className={clsx('fill-foreground h-4 w-4', isOpen && 'rotate-180')} />
@@ -193,7 +193,10 @@ export default function Dropdown({
       {isOpen && !disabled && (
         <ul
           ref={listReference}
-          className="border-border text-foreground bg-background absolute z-200 mt-1 max-h-60 overflow-auto rounded-md border py-1 shadow-lg"
+          className={clsx(
+            'border-border text-foreground bg-background absolute z-200 mt-1 max-h-60 overflow-auto rounded-md border py-1 shadow-lg',
+            className,
+          )}
         >
           {optionsArray.length > 0 ? (
             Object.entries(options).map(([value, label], index) => (

src/main/frontend/app/routes/datamapper/property-list.tsx

@@ -334,7 +334,7 @@ function PropertyList({ config, configDispatch }: PropertyListProperties) {
         <div className="absolute right-[65%] flex flex-row items-center justify-between px-45">
           <h1 className="text-l font-semibold">Source: {config.formatTypes.source?.name}</h1>
         </div>
-        <div className="absolute right-[45%] left-[45%] flex flex-row items-center justify-between">
+        <div className="absolute right-[45%] left-[45%] z-10 flex flex-row items-center justify-between">
           <GenerateButton highlightUnset={flow.highlightUnset} mappingListConfig={config} />
         </div>
         <div className="absolute left-[65%] flex flex-row items-center justify-between px-45">