From 275c89b7c2ed5015ec0908a63421f67dde1c16ae Mon Sep 17 00:00:00 2001
From: Tommaso Menga <tommaso.menga-94@hotmail.it>
Date: Tue, 17 Dec 2024 11:05:57 +0100
Subject: [PATCH] fix(sbb-message): fix image alignment (#3305)

---
 src/elements/message/message.scss           |  1 +
 src/elements/message/message.visual.spec.ts | 25 +++++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/src/elements/message/message.scss b/src/elements/message/message.scss
index d54d86adbf..0b0426d926 100644
--- a/src/elements/message/message.scss
+++ b/src/elements/message/message.scss
@@ -28,6 +28,7 @@
 
 ::slotted([slot='image']) {
   display: block;
+  margin-inline: auto !important; // overrides '.sbb-figure' margin
   margin-block: var(--sbb-message-image-margin-block) !important; // overrides '.sbb-figure' margin
   width: 100%;
 }
diff --git a/src/elements/message/message.visual.spec.ts b/src/elements/message/message.visual.spec.ts
index dfab902ca9..b355b9d1a2 100644
--- a/src/elements/message/message.visual.spec.ts
+++ b/src/elements/message/message.visual.spec.ts
@@ -63,6 +63,31 @@ describe(`sbb-message`, () => {
           await waitForImageReady(setup.snapshotElement.querySelector(testCase.imgSelector)!);
         }),
       );
+
+      it(
+        `small image ${testCase.title}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(html`
+            <style>
+              [slot='image'] {
+                width: 200px;
+              }
+            </style>
+            <sbb-message title-content="Unfortunately, an error has occurred.">
+              ${testCase.imgTemplate()}
+              <p slot="subtitle">Please reload the page or try your search again later.</p>
+              <p slot="legend">Error code: 0001</p>
+              <sbb-secondary-button
+                slot="action"
+                icon-name="arrows-circle-small"
+                size="m"
+              ></sbb-secondary-button>
+            </sbb-message>
+          `);
+
+          await waitForImageReady(setup.snapshotElement.querySelector(testCase.imgSelector)!);
+        }),
+      );
     }
 
     it(