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.
This commit is contained in:
9
.github/workflows/tests.e2e.yaml
vendored
9
.github/workflows/tests.e2e.yaml
vendored
@@ -27,6 +27,7 @@ jobs:
|
||||
-
|
||||
name: Output artifact directories
|
||||
id: artifacts
|
||||
if: always() # Run even if previous steps fail because test run video is always captured
|
||||
shell: bash
|
||||
run: |-
|
||||
declare -r dirs_json_file='cypress-dirs.json'
|
||||
@@ -49,15 +50,15 @@ jobs:
|
||||
echo "VIDEOS_DIR=${VIDEOS_DIR}" >> "${GITHUB_OUTPUT}"
|
||||
-
|
||||
name: Upload screenshots
|
||||
if: failure() # Run only if previous step fails because screenshots will be generated only if E2E test failed
|
||||
if: failure() # Run only if previous steps fail because screenshots will be generated only if E2E test failed
|
||||
uses: actions/upload-artifact@v3
|
||||
with:
|
||||
name: e2e-screenshots
|
||||
name: e2e-screenshots-${{ matrix.os }}
|
||||
path: ${{ steps.artifacts.outputs.SCREENSHOTS_DIR }}
|
||||
-
|
||||
name: Upload videos
|
||||
if: always() # Run even if previous step fails because test run video is always captured
|
||||
if: always() # Run even if previous steps fail because test run video is always captured
|
||||
uses: actions/upload-artifact@v3
|
||||
with:
|
||||
name: e2e-videos
|
||||
name: e2e-videos-${{ matrix.os }}
|
||||
path: ${{ steps.artifacts.outputs.VIDEOS_DIR }}
|
||||
|
||||
Reference in New Issue
Block a user