XFA - Give all the available space to the caption in case of checkButton

- a checkbox or radio doesn't have to be rescaled when the container is large so give the extra space to the caption to avoid some word wrapping.
  - when the caption is on the right, then put ui on the left as first element and so remove flex:row-reverse stuff.

src/core/xfa/template.js

@@ -2387,25 +2387,30 @@ class Field extends XFAObject {
       }
       ui.children.push(caption);
       return HTMLResult.success(html, bbox);
+    } else if (this.ui.checkButton) {
+      caption.attributes.class[0] = "xfaCaptionForCheckButton";
     }
 
     if (!ui.attributes.class) {
       ui.attributes.class = [];
     }
 
-    ui.children.splice(0, 0, caption);
     switch (this.caption.placement) {
       case "left":
+        ui.children.splice(0, 0, caption);
         ui.attributes.class.push("xfaLeft");
         break;
       case "right":
-        ui.attributes.class.push("xfaRight");
+        ui.children.push(caption);
+        ui.attributes.class.push("xfaLeft");
         break;
       case "top":
+        ui.children.splice(0, 0, caption);
         ui.attributes.class.push("xfaTop");
         break;
       case "bottom":
-        ui.attributes.class.push("xfaBottom");
+        ui.children.push(caption);
+        ui.attributes.class.push("xfaTop");
         break;
       case "inline":
         // TODO;

web/xfa_layer_builder.css

@@ -90,6 +90,11 @@
   flex: 0 1 auto;
 }
 
+.xfaCaptionForCheckButton {
+  overflow: hidden;
+  flex: 1 1 auto;
+}
+
 .xfaLabel {
   height: 100%;
   width: 100%;
@@ -101,17 +106,8 @@
   align-items: center;
 }
 
-.xfaLeft > .xfaCaption {
+.xfaLeft > .xfaCaption,
-  max-height: 100%;
+.xfaLeft > .xfaCaptionForCheckButton {
-}
-
-.xfaRight {
-  display: flex;
-  flex-direction: row-reverse;
-  align-items: center;
-}
-
-.xfaRight > .xfaCaption {
   max-height: 100%;
 }
 
@@ -121,17 +117,8 @@
   align-items: flex-start;
 }
 
-.xfaTop > .xfaCaption {
+.xfaTop > .xfaCaption,
-  max-width: 100%;
+.xfaTop > .xfaCaptionForCheckButton {
-}
-
-.xfaBottom {
-  display: flex;
-  flex-direction: column-reverse;
-  align-items: flex-start;
-}
-
-.xfaBottom > .xfaCaption {
   max-width: 100%;
 }
 
@@ -189,6 +176,7 @@
 .xfaRadio {
   width: 100%;
   height: 100%;
+  flex: 0 0 auto;
   border: none;
 }