chore: fail PR check workflow if screenshot tests are failing (#2445)

Currently our PR check workflow is not failing if screenshot tests are
failing. This is fixed in this PR.
You can see the failed workflow
[here](https://github.com/SchwarzIT/onyx/actions/runs/12654059685?pr=2445)
(before I re-generated the screenshots)

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.changeset/late-seahorses-clean.md

@@ -0,0 +1,5 @@
+---
+"sit-onyx": patch
+---
+
+fix(UserMenu): align mobile footer app version correctly

packages/shared/src/playwright.config.base.ts

@@ -29,7 +29,7 @@ export const PLAYWRIGHT_BASE_CONFIG = {
   // if you want to update snapshots for your branch, use the corresponding GitHub action:
   // https://github.com/SchwarzIT/onyx/actions/workflows/playwright-screenshots.yml
   ignoreSnapshots: !process.env.CI,
-  updateSnapshots: process.env.PW_UPDATE_SNAPSHOTS ? "all" : "none",
+  updateSnapshots: process.env.PW_UPDATE_SNAPSHOTS === "true" ? "all" : "none",
 
   /**
    * SHARDING

packages/sit-onyx/src/components/OnyxBottomBar/OnyxBottomBar.ct.tsx

@@ -6,42 +6,26 @@ import OnyxBottomBar from "./OnyxBottomBar.vue";
 test.describe("Screenshot tests", () => {
   executeMatrixScreenshotTest({
     name: "Bottom Bar",
-    columns: ["default", "hidden-border"],
-    rows: ["right", "left", "left-and-right"],
-    component: (column, row) =>
-      row === "left-and-right" ? (
-        <OnyxBottomBar hideBorder={column === "hidden-border"}>
-          <template v-slot:left>
-            <OnyxButton label="Button"></OnyxButton>
-          </template>
-          <template v-slot:right>
-            <OnyxButton label="Button" mode="plain" color="neutral"></OnyxButton>
-            <OnyxButton label="Button"></OnyxButton>
-          </template>
-        </OnyxBottomBar>
-      ) : row === "right" ? (
-        <OnyxBottomBar hideBorder={column === "hidden-border"}>
-          <template v-slot:right>
-            <OnyxButton label="Button" mode="plain" color="neutral"></OnyxButton>
-            <OnyxButton label="Button"></OnyxButton>
-          </template>
-        </OnyxBottomBar>
-      ) : (
-        <OnyxBottomBar hideBorder={column === "hidden-border"}>
-          <template v-slot:left>
-            <OnyxButton label="Button" mode="plain" color="neutral"></OnyxButton>
-            <OnyxButton label="Button"></OnyxButton>
-          </template>
+    columns: ["default"],
+    rows: ["right", "left", "left-and-right", "hidden-border"],
+    component: (column, row) => {
+      return (
+        <OnyxBottomBar hideBorder={row === "hidden-border"} style={{ width: "32rem" }}>
+          {(row.includes("left") || row === "hidden-border") && (
+            <template v-slot:left>
+              <OnyxButton label="Button" mode="plain" color="neutral"></OnyxButton>
+              <OnyxButton label="Button"></OnyxButton>
+            </template>
+          )}
+
+          {(row.includes("right") || row === "hidden-border") && (
+            <template v-slot:right>
+              <OnyxButton label="Button" mode="plain" color="neutral"></OnyxButton>
+              <OnyxButton label="Button"></OnyxButton>
+            </template>
+          )}
         </OnyxBottomBar>
-      ),
-    hooks: {
-      beforeEach: async (component, page) => {
-        await component.evaluate((element) => {
-          element.style.padding = "5rem 0";
-          element.style.paddingRight = "25rem";
-        });
-        await page.setViewportSize({ width: 400, height: 100 });
-      },
+      );
     },
   });
 });

packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/UserMenuLayout.vue

@@ -5,8 +5,8 @@ import { useModel } from "vue";
 import { MANAGED_SYMBOL, type ManagedProp } from "../../../../composables/useManagedState";
 import { injectI18n } from "../../../../i18n";
 import type { SelectOptionValue } from "../../../../types";
+import OnyxListItem from "../../../OnyxListItem/OnyxListItem.vue";
 import OnyxFlyoutMenu from "../OnyxFlyoutMenu/OnyxFlyoutMenu.vue";
-import OnyxMenuItem from "../OnyxMenuItem/OnyxMenuItem.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -55,9 +55,10 @@ const { t } = injectI18n();
     <template v-if="props.isMobile">
       <slot name="header"></slot>
       <slot name="options"></slot>
-      <OnyxMenuItem v-if="!!slots.footer" class="onyx-user-menu__mobile-footer" disabled>
+      <!-- we use list item here instead of menu item since the footer is not interactive -->
+      <OnyxListItem v-if="!!slots.footer" class="onyx-user-menu__mobile-footer" disabled>
         <slot name="footer"> </slot>
-      </OnyxMenuItem>
+      </OnyxListItem>
     </template>
 
     <template v-else>