fix(sbb-message): fix image alignment (#3305)

sbb-design-systems · Dec 17, 2024 · 275c89b · 275c89b
1 parent bdb0fb5
commit 275c89b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git 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
@@ -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(