From 597c99bb3b81372a47db67bd491c713e06c16c38 Mon Sep 17 00:00:00 2001
From: Lars Rickert <lars.rickert@mail.schwarz>
Date: Fri, 28 Jun 2024 14:32:16 +0200
Subject: [PATCH] fix sm width

---
 .../components/OnyxNavBar/OnyxNavBar.ct.tsx   | 19 ++++++++++++-------
 .../src/components/OnyxNavBar/OnyxNavBar.vue  |  5 -----
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx
index 86728a60b..d71c89c16 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx
@@ -240,12 +240,17 @@ Object.entries(ONYX_BREAKPOINTS).forEach(([breakpoint, width]) => {
 
     await expect(page).toHaveScreenshot(`grid-default-${breakpoint}.png`);
 
-    const app = page.locator(".onyx-app");
-
-    await app.evaluate((element) => element.classList.add("onyx-grid-max-md"));
-    await expect(page).toHaveScreenshot("grid-max-width-${}.png");
-
-    await app.evaluate((element) => element.classList.add("onyx-grid-center"));
-    await expect(page).toHaveScreenshot(`grid-max-center-${breakpoint}.png`);
+    // eslint-disable-next-line playwright/no-conditional-in-test -- prevent useless screenshots for breakpoints that don't have a max width
+    if (width > ONYX_BREAKPOINTS.md) {
+      const app = page.locator(".onyx-app");
+
+      await app.evaluate((element) => element.classList.add("onyx-grid-max-md"));
+      // eslint-disable-next-line playwright/no-conditional-expect
+      await expect(page).toHaveScreenshot(`grid-max-width-${breakpoint}.png`);
+
+      await app.evaluate((element) => element.classList.add("onyx-grid-center"));
+      // eslint-disable-next-line playwright/no-conditional-expect
+      await expect(page).toHaveScreenshot(`grid-max-center-${breakpoint}.png`);
+    }
   });
 });
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue
index 7bc2f7bad..9d568788a 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue
+++ b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue
@@ -163,7 +163,6 @@ provide(MOBILE_NAV_BAR_INJECTION_KEY, isMobile);
 
 <style lang="scss">
 @use "../../styles/mixins/layers";
-@use "../../styles/breakpoints.scss";
 
 $gap: var(--onyx-spacing-md);
 $height: 3.5rem;
@@ -205,10 +204,6 @@ $height: 3.5rem;
       // sync with grid
       max-width: var(--onyx-grid-max-width);
       margin-inline: var(--onyx-grid-margin-inline);
-
-      @include breakpoints.container(max, sm) {
-        padding-inline: var(--onyx-spacing-xl);
-      }
     }
 
     &__back {