5 files changed, 24 insertions, 11 deletions
diff --git a/packages/exchange-backoffice-ui/src/handlers/Separator.tsx b/packages/exchange-backoffice-ui/src/handlers/Caption.tsx
index 5fa25c3ca..fbf154d89 100644
--- a/packages/exchange-backoffice-ui/src/handlers/Separator.tsx
+++ b/packages/exchange-backoffice-ui/src/handlers/Caption.tsx
@@ -1,5 +1,6 @@
 import { VNode, h } from "preact";
 import {
+  IconAddon,
   InputLine,
   LabelWithTooltipMaybeRequired,
   UIFormProps,
@@ -10,12 +11,20 @@ interface Props {
   label: TranslatedString;
   tooltip?: TranslatedString;
   help?: TranslatedString;
+  before?: VNode;
+  after?: VNode;
 }
 
-export function Separator({ label, tooltip, help }: Props): VNode {
+export function Caption({ before, after, label, tooltip, help }: Props): VNode {
   return (
-    <div class="sm:col-span-6">
+    <div class="sm:col-span-6 flex">
+      {before !== undefined && (
+        <span class="pointer-events-none flex items-center pr-2">{before}</span>
+      )}
       <LabelWithTooltipMaybeRequired label={label} tooltip={tooltip} />
+      {after !== undefined && (
+        <span class="pointer-events-none flex items-center pl-2">{after}</span>
+      )}
       {help && (
         <p class="mt-2 text-sm text-gray-500" id="email-description">
           {help}
diff --git a/packages/exchange-backoffice-ui/src/handlers/Group.tsx b/packages/exchange-backoffice-ui/src/handlers/Group.tsx
index 04af0647b..0645f6d97 100644
--- a/packages/exchange-backoffice-ui/src/handlers/Group.tsx
+++ b/packages/exchange-backoffice-ui/src/handlers/Group.tsx
@@ -28,7 +28,7 @@ export function Group({
           />
         )}
       </div>
-      <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+      <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-2 sm:grid-cols-6">
         <RenderAllFieldsByUiConfig fields={fields} />
       </div>
       <div class="pt-4">
diff --git a/packages/exchange-backoffice-ui/src/handlers/InputChoiceStacked.tsx b/packages/exchange-backoffice-ui/src/handlers/InputChoiceStacked.tsx
index b19a0d82e..361eb39a3 100644
--- a/packages/exchange-backoffice-ui/src/handlers/InputChoiceStacked.tsx
+++ b/packages/exchange-backoffice-ui/src/handlers/InputChoiceStacked.tsx
@@ -19,6 +19,7 @@ export function InputChoiceStacked(
     name,
     label,
     tooltip,
+    help,
     placeholder,
     required,
     before,
@@ -88,6 +89,11 @@ export function InputChoiceStacked(
           })}
         </div>
       </fieldset>
+      {help && (
+        <p class="mt-2 text-sm text-gray-500" id="email-description">
+          {help}
+        </p>
+      )}
     </div>
   );
 }
diff --git a/packages/exchange-backoffice-ui/src/handlers/InputLine.tsx b/packages/exchange-backoffice-ui/src/handlers/InputLine.tsx
index b3a5f8e98..255654949 100644
--- a/packages/exchange-backoffice-ui/src/handlers/InputLine.tsx
+++ b/packages/exchange-backoffice-ui/src/handlers/InputLine.tsx
@@ -2,7 +2,7 @@ import { TranslatedString } from "@gnu-taler/taler-util";
 import { ComponentChildren, Fragment, VNode, h } from "preact";
 import { useField } from "./useField.js";
 
-interface IconAddon {
+export interface IconAddon {
   type: "icon";
   icon: VNode;
 }
diff --git a/packages/exchange-backoffice-ui/src/handlers/forms.ts b/packages/exchange-backoffice-ui/src/handlers/forms.ts
index 418754919..1d6a7daa4 100644
--- a/packages/exchange-backoffice-ui/src/handlers/forms.ts
+++ b/packages/exchange-backoffice-ui/src/handlers/forms.ts
@@ -8,7 +8,7 @@ import { InputArray } from "./InputArray.js";
 import { InputSelectMultiple } from "./InputSelectMultiple.js";
 import { InputTextArea } from "./InputTextArea.js";
 import { InputFile } from "./InputFile.js";
-import { Separator } from "./Separator.js";
+import { Caption } from "./Caption.js";
 import { Group } from "./Group.js";
 import { InputSelectOne } from "./InputSelectOne.js";
 
@@ -25,7 +25,7 @@ type DoubleColumnFormSection = {
  */
 type FieldType = {
   group: Parameters<typeof Group>[0];
-  separator: Parameters<typeof Separator>[0];
+  caption: Parameters<typeof Caption>[0];
   array: Parameters<typeof InputArray>[0];
   file: Parameters<typeof InputFile>[0];
   selectOne: Parameters<typeof InputSelectOne>[0];
@@ -42,7 +42,7 @@ type FieldType = {
  */
 export type UIFormField =
   | { type: "group"; props: FieldType["group"] }
-  | { type: "separator"; props: FieldType["separator"] }
+  | { type: "caption"; props: FieldType["caption"] }
   | { type: "array"; props: FieldType["array"] }
   | { type: "file"; props: FieldType["file"] }
   | { type: "selectOne"; props: FieldType["selectOne"] }
@@ -66,7 +66,7 @@ type UIFormFieldMap = {
  */
 const UIFormConfiguration: UIFormFieldMap = {
   group: Group,
-  separator: Separator,
+  caption: Caption,
   array: InputArray,
   text: InputText,
   file: InputFile,
@@ -90,9 +90,7 @@ export function RenderAllFieldsByUiConfig({
       const Component = UIFormConfiguration[
         field.type
       ] as FieldComponentFunction<any>;
-      const c = structuredClone(field.props);
-      c.key = i;
-      return Component(c);
+      return Component(field.props);
     }),
   );
 }