feat(harmonia): professional BPM task-form layout - two-column detail grid with label columns

A task form rendered every read-only field as a stacked Label-above-Value block in a single
column with the field-group's full gap - a long, loose page for what is really a compact detail
card. Rework the task-form layout:

- the field container becomes a responsive two-column grid (single column below sm, so narrow
  dialogs still read well);
- each read-only field is a compact row: a fixed-width muted label column with the value
  LEFT-aligned beside it, so values line up vertically like a classic detail card;
- headers, separators, paragraphs, textareas and the action-button row span both columns;
  non-task forms keep the x-h-field-group vertical layout unchanged.

All utility classes used ship in harmonia.css 2.6.0. Verified live: regenerated a confirm task
form on the updated template - the served form renders the two-column detail card.

Author: delchev

components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template

@@ -1,32 +1,34 @@
 #macro(leaf $el)
 #if($metadata.taskForm && $el.readonly && $el.model)
-        <!-- BPM task form: a read-only field is shown as a Label: Value row (like the detail card), not
-             an editable input. Editable opt-in fields (readonly=false) fall through to the input below.
+        <!-- BPM task form: a read-only field is a compact Label: Value row - a fixed-width muted
+             label column with the value LEFT-aligned beside it, so values line up vertically like a
+             classic detail card - one cell of the two-column grid.
+             Editable opt-in fields (readonly=false) fall through to the input below.
              A relation.field control's model is the resolver-set name/value variable, so e.g. listing
              `customer.name` shows the customer's name here rather than the raw FK id. A number is
              formatted with its pattern (grouped, fixed decimals); other values render as-is. -->
-        <div x-h-field>
-          <label x-h-label>$!el.label</label>
+        <div class="hbox items-center gap-3">
+          <span x-h-text.muted class="text-sm shrink-0" style="width: 9rem;">$!el.label</span>
 #if($el.controlId == "input-number")
-          <div x-h-text class="py-1" x-text="fmtNumber(model.$el.model, '$!el.pattern')"></div>
+          <span x-h-text class="font-medium min-w-0 break-words" x-text="fmtNumber(model.$el.model, '$!el.pattern')"></span>
 #elseif($el.controlId == "input-date" || $el.controlId == "input-datetime-local" || $el.controlId == "input-time" || $el.controlId == "input-month")
-          <div x-h-text class="py-1" x-text="fmtDate(model.$el.model, '$el.controlId')"></div>
+          <span x-h-text class="font-medium min-w-0 break-words" x-text="fmtDate(model.$el.model, '$el.controlId')"></span>
 #else
-          <div x-h-text class="py-1" x-text="(model.$el.model === null || model.$el.model === undefined || model.$el.model === '') ? '—' : model.$el.model"></div>
+          <span x-h-text class="font-medium min-w-0 break-words" x-text="(model.$el.model === null || model.$el.model === undefined || model.$el.model === '') ? '—' : model.$el.model"></span>
 #end
         </div>
 #elseif($el.controlId == "header")
-        <h1 x-h-text.h3 class="mb-2">$!el.label</h1>
+        <h1 x-h-text.h3 class="mb-2 col-span-full">$!el.label</h1>
 #elseif($el.controlId == "paragraph")
-        <p x-h-text>$!el.label</p>
+        <p x-h-text class="col-span-full">$!el.label</p>
 #elseif($el.controlId == "line")
-        <hr x-h-separator />
+        <hr x-h-separator class="col-span-full" />
 #elseif($el.controlId == "spacer")
         <div class="flex-1"></div>
 #elseif($el.controlId == "link")
         <a x-h-button data-variant="link" href="$!el.url">$!el.label</a>
 #elseif($el.controlId == "input-textarea")
-        <div x-h-field>
+        <div x-h-field class="col-span-full">
           <label x-h-label for="$el.id">$!el.label</label>
           <textarea x-h-textarea id="$el.id" rows="4" x-model="model.$el.model"#if($el.readonly) readonly#end></textarea>
         </div>
@@ -135,16 +137,23 @@
       <div x-show="message" x-h-alert data-variant="information" role="status">
         <div x-h-alert-description x-text="message"></div>
       </div>
+#if($metadata.taskForm)
+      <!-- Task form: a responsive two-column detail grid (single column below the sm breakpoint) -
+           compact horizontal Label: Value rows; headers, separators, textareas and the action-button
+           row span both columns. -->
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-3">
+#else
       <div x-h-field-group>
+#end
 #foreach($element in $form)
 #if($element.controlId == "container-hbox")
-        <div class="hbox gap-3 items-end">
+        <div class="hbox gap-3 items-end col-span-full mt-2">
 #foreach($child in $element.children)
 #leaf($child)
 #end
         </div>
 #elseif($element.controlId == "container-vbox")
-        <div class="vbox gap-3">
+        <div class="vbox gap-3 col-span-full">
 #foreach($child in $element.children)
 #leaf($child)
 #end