From 35a3c3e714e2e4f95961f47a8b45d7cb34374495 Mon Sep 17 00:00:00 2001
From: mima-bsi <Miriana.Martini@bsi-software.com>
Date: Fri, 12 Dec 2025 11:39:51 +0100
Subject: [PATCH 1/2] fix: email width problem for outlook windows 11

---
 templates/email/_layout.twig | 134 +++++++++++++++++++----------------
 1 file changed, 72 insertions(+), 62 deletions(-)
diff --git a/templates/email/_layout.twig b/templates/email/_layout.twig
index 69261a8..c3fc255 100644
--- a/templates/email/_layout.twig
+++ b/templates/email/_layout.twig
@@ -67,70 +67,80 @@
         <![endif]-->
     </head>
     <body vlink="{{visitedLinkColor}}" width="100%" style="margin: 0; padding: 0 !important; word-spacing: normal; mso-line-height-rule: exactly;">
-        <table role="presentation" class="{{darkModeClassBg}}" style="width: 100%; border: 0; border-spacing: 0; background-color: #ffffff;">
-            <tr>
-                <td align="center">
-                    <!--[if mso]>
-                    <table role="presentation" align="center" style="width: {{ layoutWidth }}px;">
-                    <tr>
-                    <td style="padding: 10px 0;">
-                    <![endif]-->
-                    <div class="bsi-header" style="width: 96%; max-width: {{ layoutWidth }}px; margin: 10px auto;">
-                        <table role="presentation" style="width: 100%; border: 0; border-spacing: 0;">
-                            <tr>
-                                <td align="center" style="padding: 0; margin: 0; text-align: center;" data-bsi-dropzone="preheader-dz-fWSCej" data-bsi-dropzone-allowed-elements="header-preheader-cVwk8f logo-TlgUGB" data-bsi-dropzone-max-number-of-elements="2">
-                                    {% block preheader %}
-                                        {% include '@bsi-cx/design-standard-library-email/content-elements/base/header-preheader/template.twig' %}
-                                    {% endblock %}
-                                </td>
-                            </tr>
-                            <tr>
-                                <td style="padding: 0; margin: 0;">
-                                    <table style="width: 100%; border: 0; border-spacing: 0;">
-                                        <tr>
-                                            <td align="left" style="padding: 0; margin: 0; text-align: left;" data-bsi-dropzone="header-left-dz-4v3EEz" data-bsi-dropzone-allowed-elements="logo-TlgUGB text-Or4N33 cta-eoRgSU" data-bsi-dropzone-max-number-of-elements="1">
-                                                {% block headerLeft %}
-                                                    {% if headerLogoAlign == 'left' %}
-                                                        {% include './content-elements/base/logo/template.twig' %}
-                                                    {% endif %}
-                                                {% endblock %}
-                                            </td>
-                                            <td align="right" style="padding: 0; margin: 0; text-align: right;" data-bsi-dropzone="header-right-dz-BnqL9s" data-bsi-dropzone-allowed-elements="text-Or4N33 cta-eoRgSU logo-TlgUGB" data-bsi-dropzone-max-number-of-elements="1">
-                                                {% block headerRight %}
-                                                    {% if headerLogoAlign == 'right' %}
-                                                        {% include './content-elements/base/logo/template.twig' %}
-                                                    {% endif %}
-                                                {% endblock %}
-                                            </td>
-                                        </tr>
-                                    </table>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td align="center" style="padding: 0; margin: 0;" data-bsi-dropzone="header-img-dz-QT6wSZ" data-bsi-dropzone-allowed-elements="header-img-GTzJdB divider-LQi2yS" data-bsi-dropzone-max-number-of-elements="1">
-                                    {% block headerImage %}
-                                        {% include './content-elements/base/header-img/template.twig' %}
-                                    {% endblock %}
-                                </td>
-                            </tr>
+        <!--[if mso]>
+        <table role="presentation" align="center" style="width: {{properties.layoutWidth + 10}}px;">
+        <tr>
+        <![endif]-->
+        <div style="width: 100%; max-width: {{properties.layoutWidth + 10}}px; margin: 0 auto;">
+            <table role="presentation" class="{{darkModeClassBg}}" style="width: 100%; border: 0; border-spacing: 0; background-color: #ffffff;">
+                <tr>
+                    <td align="center">
+                        <!--[if mso]>
+                        <table role="presentation" align="center" style="width: {{ layoutWidth }}px;">
+                        <tr>
+                        <td style="padding: 10px 0;">
+                        <![endif]-->
+                        <div class="bsi-header" style="width: 96%; max-width: {{ layoutWidth }}px; margin: 10px auto;">
+                            <table role="presentation" style="width: 100%; border: 0; border-spacing: 0;">
+                                <tr>
+                                    <td align="center" style="padding: 0; margin: 0; text-align: center;" data-bsi-dropzone="preheader-dz-fWSCej" data-bsi-dropzone-allowed-elements="header-preheader-cVwk8f logo-TlgUGB" data-bsi-dropzone-max-number-of-elements="2">
+                                        {% block preheader %}
+                                            {% include '@bsi-cx/design-standard-library-email/content-elements/base/header-preheader/template.twig' %}
+                                        {% endblock %}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td style="padding: 0; margin: 0;">
+                                        <table style="width: 100%; border: 0; border-spacing: 0;">
+                                            <tr>
+                                                <td align="left" style="padding: 0; margin: 0; text-align: left;" data-bsi-dropzone="header-left-dz-4v3EEz" data-bsi-dropzone-allowed-elements="logo-TlgUGB text-Or4N33 cta-eoRgSU" data-bsi-dropzone-max-number-of-elements="1">
+                                                    {% block headerLeft %}
+                                                        {% if headerLogoAlign == 'left' %}
+                                                            {% include './content-elements/base/logo/template.twig' %}
+                                                        {% endif %}
+                                                    {% endblock %}
+                                                </td>
+                                                <td align="right" style="padding: 0; margin: 0; text-align: right;" data-bsi-dropzone="header-right-dz-BnqL9s" data-bsi-dropzone-allowed-elements="text-Or4N33 cta-eoRgSU logo-TlgUGB" data-bsi-dropzone-max-number-of-elements="1">
+                                                    {% block headerRight %}
+                                                        {% if headerLogoAlign == 'right' %}
+                                                            {% include './content-elements/base/logo/template.twig' %}
+                                                        {% endif %}
+                                                    {% endblock %}
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td align="center" style="padding: 0; margin: 0;" data-bsi-dropzone="header-img-dz-QT6wSZ" data-bsi-dropzone-allowed-elements="header-img-GTzJdB divider-LQi2yS" data-bsi-dropzone-max-number-of-elements="1">
+                                        {% block headerImage %}
+                                            {% include './content-elements/base/header-img/template.twig' %}
+                                        {% endblock %}
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                        <!--[if mso]>
+                        </td>
+                        </tr>
                         </table>
-                    </div>
-                    <!--[if mso]>
+                        <![endif]-->
                     </td>
-                    </tr>
-                    </table>
-                    <![endif]-->
-                </td>
-            </tr>
-        </table>
-        <div role="article" aria-roledescription="email" lang="en" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;" data-bsi-dropzone="layout-3Pmmjt">
-            {% block content %}
-            {% endblock %}
-        </div>
-        <div data-bsi-dropzone="footer-j91rgA">
-            {% block footer %}
-                {% include '@bsi-cx/design-standard-library-email/content-elements/layout/layout-dark-footer/template.twig' %}
-            {% endblock %}
+                </tr>
+            </table>
+            <div role="article" aria-roledescription="email" lang="en" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;" data-bsi-dropzone="layout-3Pmmjt">
+                {% block content %}
+                {% endblock %}
+            </div>
+            <div data-bsi-dropzone="footer-j91rgA">
+                {% block footer %}
+                    {% include '@bsi-cx/design-standard-library-email/content-elements/layout/layout-dark-footer/template.twig' %}
+                {% endblock %}
+            </div>
         </div>
+        <!--[if mso]>
+        </tr>
+        </table>
+        <![endif]-->
     </body>
 </html>
\ No newline at end of file

From 053952173eb637b93c2f12ad29f1ce65dcbe6e50 Mon Sep 17 00:00:00 2001
From: mima-bsi <Miriana.Martini@bsi-software.com>
Date: Fri, 9 Jan 2026 16:14:25 +0100
Subject: [PATCH 2/2] fix: remove the [mso] tag (not necessary)

---
 templates/email/_layout.twig | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/templates/email/_layout.twig b/templates/email/_layout.twig
index c3fc255..782f0c9 100644
--- a/templates/email/_layout.twig
+++ b/templates/email/_layout.twig
@@ -67,10 +67,6 @@
         <![endif]-->
     </head>
     <body vlink="{{visitedLinkColor}}" width="100%" style="margin: 0; padding: 0 !important; word-spacing: normal; mso-line-height-rule: exactly;">
-        <!--[if mso]>
-        <table role="presentation" align="center" style="width: {{properties.layoutWidth + 10}}px;">
-        <tr>
-        <![endif]-->
         <div style="width: 100%; max-width: {{properties.layoutWidth + 10}}px; margin: 0 auto;">
             <table role="presentation" class="{{darkModeClassBg}}" style="width: 100%; border: 0; border-spacing: 0; background-color: #ffffff;">
                 <tr>
@@ -138,9 +134,5 @@
                 {% endblock %}
             </div>
         </div>
-        <!--[if mso]>
-        </tr>
-        </table>
-        <![endif]-->
     </body>
 </html>
\ No newline at end of file
