diff --git a/.eslintignore b/.eslintignore
index 08ec761fb3..cfd87467f1 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,4 +1,4 @@
-src/vector/modernizr.js
+src/vector/modernizr.cjs
 test/end-to-end-tests/node_modules/
 test/end-to-end-tests/element/
 test/end-to-end-tests/synapse/
diff --git a/.prettierignore b/.prettierignore
index 858f7eb116..121d746801 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -21,7 +21,7 @@ electron/pub
 /build_config.yaml
 # Raises an error because it contains a template var breaking the script tag
 src/vector/index.html
-src/vector/modernizr.js
+src/vector/modernizr.cjs
 /docs/lib
 /book
 /debian/tmp
diff --git a/code_style.md b/code_style.md
index b6c1e46e95..bd1fb4371c 100644
--- a/code_style.md
+++ b/code_style.md
@@ -274,6 +274,7 @@ Inheriting all the rules of TypeScript, the following additionally apply:
 20. Do not use `React.Component::forceUpdate`.
 21. Prefer to use [compound typography components](https://compound.element.io/?path=/docs/compound-web_typography--docs) instead of raw HTML elements for text. This ensures consistent font usage and letter spacing across the app.
 22. If you can't use 21, don't forget to apply the correct CSS classes for font and letter spacing.
+23. Prefer to use `Flex` or `Box` components from shared-components for layout instead of raw HTML elements with CSS flexbox styles.
 
 ## Stylesheets
 
diff --git a/package.json b/package.json
index 5219f66b71..ee7346ab3a 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
         "build-stats": "pnpm clean && pnpm build:genfiles && pnpm build:bundle-stats",
         "build:res": "node scripts/copy-res.ts",
         "build:genfiles": "pnpm build:res && pnpm build:module_system",
-        "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
+        "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js && mv src/vector/modernizr.js src/vector/modernizr.cjs",
         "build:bundle": "webpack --progress --mode production",
         "build:bundle-stats": "webpack --progress --mode production --json > webpack-stats.json",
         "build:module_system": "node module_system/scripts/install.ts",
diff --git a/packages/shared-components/vitest.config.ts b/packages/shared-components/vitest.config.ts
index 32a0f9ae24..2d5d55bc16 100644
--- a/packages/shared-components/vitest.config.ts
+++ b/packages/shared-components/vitest.config.ts
@@ -81,7 +81,10 @@ export default defineConfig({
                         configDir: path.join(dirname, ".storybook"),
                         storybookScript: "storybook --ci",
                     }),
-                    storybookVis({}),
+                    storybookVis({
+                        // 3px of difference allowed before marking as failed
+                        failureThreshold: 3,
+                    }),
                 ],
                 test: {
                     name: "storybook",
diff --git a/playwright/e2e/crypto/migration.spec.ts b/playwright/e2e/crypto/migration.spec.ts
index 86072fccc0..191568c29c 100644
--- a/playwright/e2e/crypto/migration.spec.ts
+++ b/playwright/e2e/crypto/migration.spec.ts
@@ -8,9 +8,13 @@ Please see LICENSE files in the repository root for full details.
 
 import path from "path";
 import { readFile } from "node:fs/promises";
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
 
 import { expect, test } from "../../element-web-test";
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
 test.describe("migration", { tag: "@no-webkit" }, function () {
     test.use({
         displayName: "Alice",
diff --git a/playwright/plugins/oauth_server/index.ts b/playwright/plugins/oauth_server/index.ts
index 446426a9c1..16aad2f027 100644
--- a/playwright/plugins/oauth_server/index.ts
+++ b/playwright/plugins/oauth_server/index.ts
@@ -11,6 +11,10 @@ import express from "express";
 import { type AddressInfo } from "net";
 import { type TestInfo } from "@playwright/test";
 import { randB64Bytes } from "@element-hq/element-web-playwright-common/lib/utils/rand.js";
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
 
 export class OAuthServer {
     private server?: http.Server;
diff --git a/playwright/testcontainers/synapse.ts b/playwright/testcontainers/synapse.ts
index 574f6e6cdc..059ef00c6e 100644
--- a/playwright/testcontainers/synapse.ts
+++ b/playwright/testcontainers/synapse.ts
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { SynapseContainer as BaseSynapseContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers/index.js";
 
-const TAG = "develop@sha256:9abab158a1cd7af619d5889fc8c83496e569e647068a8b856f4ad05e8cf342e8";
+const TAG = "develop@sha256:4620e446582e79a3942f5438ebf714da18c281143496e53be318334b4697b449";
 
 /**
  * SynapseContainer which freezes the docker digest to stabilise tests,
diff --git a/sonar-project.properties b/sonar-project.properties
index c1d3f59842..26970ca7f4 100644
--- a/sonar-project.properties
+++ b/sonar-project.properties
@@ -7,7 +7,7 @@ sonar.organization=element-hq
 sonar.sources=src,res,packages/shared-components/src
 sonar.tests=test,playwright,src,packages
 sonar.test.inclusions=test/*,playwright/*,src/**/*.test.*,packages/*/src/**/*.test.*,packages/*/src/test/**/*
-sonar.exclusions=__mocks__,docs,element.io,nginx
+sonar.exclusions=__mocks__,docs,element.io,nginx,src/vector/modernizr.cjs
 
 sonar.cpd.exclusions=src/i18n/strings/*.json
 sonar.typescript.tsconfigPath=./tsconfig.json
@@ -17,7 +17,6 @@ sonar.coverage.exclusions=\
   playwright/**/*,\
   res/**/*,\
   scripts/**/*,\
-  src/vector/modernizr.js,\
   src/components/views/dialogs/devtools/**/*,\
   src/utils/SessionLock.ts,\
   src/**/*.d.ts,\
diff --git a/src/vector/index.ts b/src/vector/index.ts
index 946243b6b8..bc656c8071 100644
--- a/src/vector/index.ts
+++ b/src/vector/index.ts
@@ -15,7 +15,7 @@ import { shouldPolyfill as shouldPolyFillIntlSegmenter } from "@formatjs/intl-se
 
 // These are things that can run before the skin loads - be careful not to reference the react-sdk though.
 import { parseQsFromFragment } from "./url_utils";
-import "./modernizr";
+import "./modernizr.cjs";
 
 // Import shared components CSS
 import "@element-hq/web-shared-components/dist/element-web-shared-components.css";
diff --git a/src/vector/modernizr.js b/src/vector/modernizr.cjs
similarity index 99%
rename from src/vector/modernizr.js
rename to src/vector/modernizr.cjs
index 932513ebe8..87c3bca20e 100644
--- a/src/vector/modernizr.js
+++ b/src/vector/modernizr.cjs
@@ -1,5 +1,5 @@
 /*!
- * modernizr v3.13.0
+ * modernizr v3.13.1
  * Build https://modernizr.com/download?-cors-cryptography-cssanimations-cssfilters-displaytable-es5date-es5function-es5object-es5undefined-es6array-es6collections-es6string-fetch-flexbox-json-localstorage-objectfit-promises-resizeobserver-sandbox-svg-svgasimg-svgfilters-urlparser-urlsearchparams-webaudio-dontmin
  *
  * Copyright (c)
@@ -35,7 +35,7 @@
    * @access public
    */
   var ModernizrProto = {
-    _version: '3.13.0',
+    _version: '3.13.1',
 
     // Any settings that don't work as separate modules
     // can go in here as configuration.