From 58633ab9fd33d22df1c171701f1ed97b0df110d1 Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Thu, 10 Jun 2021 15:30:19 +0200
Subject: [PATCH] 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  | 11 ++++++++---
 web/xfa_layer_builder.css | 32 ++++++++++----------------------
 2 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/src/core/xfa/template.js b/src/core/xfa/template.js
index f915308c7..52f927c82 100644
--- a/src/core/xfa/template.js
+++ b/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;
diff --git a/web/xfa_layer_builder.css b/web/xfa_layer_builder.css
index db66b569a..48c69b388 100644
--- a/web/xfa_layer_builder.css
+++ b/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 {
-  max-height: 100%;
-}
-
-.xfaRight {
-  display: flex;
-  flex-direction: row-reverse;
-  align-items: center;
-}
-
-.xfaRight > .xfaCaption {
+.xfaLeft > .xfaCaption,
+.xfaLeft > .xfaCaptionForCheckButton {
   max-height: 100%;
 }
 
@@ -121,17 +117,8 @@
   align-items: flex-start;
 }
 
-.xfaTop > .xfaCaption {
-  max-width: 100%;
-}
-
-.xfaBottom {
-  display: flex;
-  flex-direction: column-reverse;
-  align-items: flex-start;
-}
-
-.xfaBottom > .xfaCaption {
+.xfaTop > .xfaCaption,
+.xfaTop > .xfaCaptionForCheckButton {
   max-width: 100%;
 }
 
@@ -189,6 +176,7 @@
 .xfaRadio {
   width: 100%;
   height: 100%;
+  flex: 0 0 auto;
   border: none;
 }