Fix card list UI layout shifts (jumps) on load

This commit fixes layout shifts that occur on card list part of the page
when the page is initially loaded.

- Resolve issue where card list starts with minimal width, leading
  to jumps in UI until correct width is calculated on medium and
  big screens.
- Dispose of existing `ResizeObserver` properly before creating a new
  one. This prevents leaks and incorrect width calculations if
  `containerElement` changes.
- Throttle resize events to minimize width/height calculation changes,
  enhancing performance and reducing the chances for layout shifts.

Supporting CI/CD improvements:

- Enable artifact upload in CI/CD even if E2E tests fail.
- Distinguish uploaded artifacts by operating system for clarity.

tests/unit/presentation/components/Scripts/View/Cards/CardList.spec.ts

@@ -0,0 +1,63 @@
+import { shallowMount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import { Ref, nextTick, ref } from 'vue';
+import CardList from '@/presentation/components/Scripts/View/Cards/CardList.vue';
+import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
+import { UseCollectionStateStub } from '@tests/unit/shared/Stubs/UseCollectionStateStub';
+import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { createSizeObserverStub } from '@tests/unit/shared/Stubs/SizeObserverStub';
+
+const DOM_SELECTOR_CARDS = '.cards';
+
+describe('CardList.vue', () => {
+  describe('rendering cards based on width', () => {
+    it('renders cards when a valid width is provided', async () => {
+      // arrange
+      const expectedCardsExistence = true;
+      const width = ref(0);
+      // act
+      const wrapper = mountComponent({
+        widthRef: width,
+      });
+      width.value = 800;
+      await nextTick();
+      // assert
+      const actual = wrapper.find(DOM_SELECTOR_CARDS).exists();
+      expect(actual).to.equal(expectedCardsExistence, wrapper.html());
+    });
+    it('does not render cards when width is not set', async () => {
+      // arrange
+      const expectedCardsExistence = false;
+      const width = ref(0);
+      const wrapper = mountComponent({
+        widthRef: width,
+      });
+      // act
+      await nextTick();
+      // assert
+      const actual = wrapper.find(DOM_SELECTOR_CARDS).exists();
+      expect(actual).to.equal(expectedCardsExistence, wrapper.html());
+    });
+  });
+});
+
+function mountComponent(options?: {
+  readonly useCollectionState?: ReturnType<typeof useCollectionState>,
+  readonly widthRef?: Readonly<Ref<number>>,
+}) {
+  const {
+    name: sizeObserverName,
+    component: sizeObserverStub,
+  } = createSizeObserverStub(options?.widthRef);
+  return shallowMount(CardList, {
+    global: {
+      provide: {
+        [InjectionKeys.useCollectionState.key]:
+          () => options?.useCollectionState ?? new UseCollectionStateStub().get(),
+      },
+      stubs: {
+        [sizeObserverName]: sizeObserverStub,
+      },
+    },
+  });
+}