[FIX] snailmail: Avoid format errors when sending with Pingen

Pingen validates the format of documents before sending them. These are the elements that it checks and how when ensure that the constrains are validated:
    - The recipient's address should appear in a predefined area
	--> Move the address to this area and reduce the font-size if the address is too long
    - The destination country should be the last line of the address
	--> Sometimes, the Tax ID was in this zone, so we add a margin after the address
    - Above the Address Area, there should be a Postage Area that should be completely empty
	--> Make the background white to avoid having a background image in this area
	--> Crop the header if it takes too much space
    - There are margins of 5mm all around the document
	--> Crop the footer 5mm above the bottom of the page if it takes too much space
    - There is a square in the bottom left of the document that should be empty
	--> Add a margin on the left of the footer

closes odoo/odoo#29522

addons/snailmail/static/src/js/snailmail_external_layout.js

@@ -0,0 +1,7 @@
+// Change address font-size if needed
+document.addEventListener('DOMContentLoaded', function (evt) {
+    var recipientAddress = document.getElementsByClassName('recipient_address')[0].getElementsByTagName('address')[0];
+    var height = parseFloat(window.getComputedStyle(recipientAddress, null).getPropertyValue('height'));
+    var fontSize = parseFloat(window.getComputedStyle(recipientAddress, null).getPropertyValue('font-size'));
+    recipientAddress.style.fontSize = (85/height) * fontSize + 'px';
+});

addons/snailmail/static/src/scss/snailmail_external_layout_asset.scss

@@ -1,18 +1,34 @@
 /* Generic report layouts*/
 .header {
-    height: 200px;
+    max-height: 40mm;
+    overflow: hidden;
+}
+.container {
+    margin-top: 5mm;
+}
+.o_standard_footer, .o_clean_footer, .o_boxed_footer, .o_background_footer {
+    max-height: 90px !important;
+    overflow: hidden;
+    width: 95%;
+    div > div:first-child {
+        padding-left: 10mm;
+    }
 }
 .article>.page {
+    margin-top: -40px;
     > h1, > h2, > h3 {
         width: 50%;
     }
 }
-.article {
-    > .address.row {
-        padding-top: 95px;
-    }
-    > .page {
-        margin-top:-20px;
+.article > .address.row .recipient_address {
+    height: 65mm;
+    background-color: #ffffff;
+    padding-top: 23mm;
+    padding-left: 5mm;
+    padding-bottom: 5mm;
+    left: -20px !important;
+    address {
+        height: 28mm;
     }
 }
 

addons/snailmail/views/report_assets.xml

@@ -3,6 +3,7 @@
     <template id="report_assets_snailmail">
         <t t-call="web._assets_helpers"/>
         <link rel="stylesheet" type="text/scss" href="/snailmail/static/src/scss/snailmail_external_layout_asset.scss"/>
+        <script type="text/javascript" src="/snailmail/static/src/js/snailmail_external_layout.js"/>
     </template>
     <template id="report_layout" inherit_id="web.report_layout">
         <xpath expr="//head" position="inside">
@@ -14,4 +15,9 @@
             <t t-if="env and env.context.get('snailmail_layout')" t-call-assets="snailmail.report_assets_snailmail"/>
         </xpath>
     </template>
+    <template id="address_layout" inherit_id="web.address_layout">
+        <xpath expr='//div[@name="address"]' position="before">
+            <t t-set="colclass" t-value="colclass + ' recipient_address'"/>
+        </xpath>
+    </template>
 </odoo>