diff --git a/.yarn/patches/mq-polyfill-npm-1.1.8-62fe162439.patch b/.yarn/patches/mq-polyfill-npm-1.1.8-62fe162439.patch
new file mode 100644
index 00000000..1f130d3f
--- /dev/null
+++ b/.yarn/patches/mq-polyfill-npm-1.1.8-62fe162439.patch
@@ -0,0 +1,74 @@
+diff --git a/lib/MediaQueryList/MediaQueryList.js b/lib/MediaQueryList/MediaQueryList.js
+index ebb32fc06b31c229f3f0f547ddaddcdda326551e..145d734c1ba508cae996669ded7b7a025d24d8b5 100644
+--- a/lib/MediaQueryList/MediaQueryList.js
++++ b/lib/MediaQueryList/MediaQueryList.js
+@@ -24,5 +24,13 @@ class MediaQueryList {
+     throw new TypeError("'removeListener' called on an object that does not implement interface MediaQueryList.");
+   }
+ 
++  addEventListener() {
++    throw new TypeError("'addEventListener' called on an object that does not implement interface MediaQueryList.");
++  }
++
++  removeEventListener() {
++    throw new TypeError("'removeEventListener' called on an object that does not implement interface MediaQueryList.");
++  }
++
+ }
+ exports.default = MediaQueryList;
+\ No newline at end of file
+diff --git a/lib/MediaQueryList/MediaQueryList.js.flow b/lib/MediaQueryList/MediaQueryList.js.flow
+index 394f8456f1f3c3a38a9ef88bac4ca998cbb09722..f10ab50abcf94639b064c2a75059f4a20db755bf 100644
+--- a/lib/MediaQueryList/MediaQueryList.js.flow
++++ b/lib/MediaQueryList/MediaQueryList.js.flow
+@@ -31,8 +31,22 @@ export default class MediaQueryList {
+     );
+   }
+ 
++  addEventListener() {
++    throw new TypeError(
++      "'addEventListener' called on an object that does not implement interface MediaQueryList.",
++    );
++  }
++
++  removeEventListener() {
++    throw new TypeError(
++      "'removeEventListener' called on an object that does not implement interface MediaQueryList.",
++    );
++  }
++
+   media: string;
+   matches: boolean;
+   addListener: (listener: ListenerType) => void;
+   removeListener: (listener: ListenerType) => void;
++  addEventListener: (type: 'change', listener: ListenerType) => void;
++  removeEventListener: (type: 'change', listener: ListenerType) => void;
+ }
+diff --git a/lib/matchMedia.js b/lib/matchMedia.js
+index 3105de98293431985c2bf5b2fc4336a7f70a1d7d..37fb50e772c4105d6ba5c25cda078d570c5ef0ff 100644
+--- a/lib/matchMedia.js
++++ b/lib/matchMedia.js
+@@ -19,7 +19,9 @@ const matchMedia = ({
+     media: { enumerable: true, value: media },
+     matches: { enumerable: true, configurable: true, value: evalQuery(media) },
+     addListener: { value: addListener },
+-    removeListener: { value: removeListener }
++    removeListener: { value: removeListener },
++    addEventListener: { value: (type, listener) => addListener(listener) },
++    removeEventListener: { value: (type, listener) => removeListener(listener) }
+   });
+ 
+   return mqList;
+diff --git a/lib/matchMedia.js.flow b/lib/matchMedia.js.flow
+index f6d10b7f982fc261ef1cd9945ce9f007e1f9c008..7a91088ba321f712bcecafbb003d9e4e06e17e99 100644
+--- a/lib/matchMedia.js.flow
++++ b/lib/matchMedia.js.flow
+@@ -25,6 +25,8 @@ const matchMedia: CreateMatchMediaType = ({
+       matches: { enumerable: true, configurable: true, value: evalQuery(media) },
+       addListener: { value: addListener },
+       removeListener: { value: removeListener },
++      addEventListener: { value: (type, listener) => addListener(listener) },
++      removeEventListener: { value: (type, listener) => removeListener(listener) },
+     });
+ 
+     return mqList;
diff --git a/package.json b/package.json
index dfe5649e..09f81e0c 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
         "monaco-editor": "^0.30.1",
         "monaco-editor-webpack-plugin": "^6.0.0",
         "monaco-themes": "^0.4.0",
-        "mq-polyfill": "^1.1.8",
+        "mq-polyfill": "1.1.8",
         "node-sass": "^6.0.1",
         "prop-types": "^15.8.1",
         "react": "^16.13.1",
@@ -104,5 +104,8 @@
         "jest-mock-extended": "^2.0.4",
         "prettier": "^2.5.1"
     },
-    "packageManager": "yarn@3.2.0"
+    "packageManager": "yarn@3.2.0",
+    "resolutions": {
+        "mq-polyfill@1.1.8": "patch:mq-polyfill@npm:1.1.8#.yarn/patches/mq-polyfill-npm-1.1.8-62fe162439.patch"
+    }
 }
diff --git a/yarn.lock b/yarn.lock
index d19deabc..1d252c4b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2479,7 +2479,7 @@ __metadata:
     monaco-editor: ^0.30.1
     monaco-editor-webpack-plugin: ^6.0.0
     monaco-themes: ^0.4.0
-    mq-polyfill: ^1.1.8
+    mq-polyfill: 1.1.8
     node-sass: ^6.0.1
     prettier: ^2.5.1
     prop-types: ^15.8.1
@@ -11653,13 +11653,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mq-polyfill@npm:^1.1.8":
+"mq-polyfill@npm:1.1.8":
   version: 1.1.8
   resolution: "mq-polyfill@npm:1.1.8"
   checksum: 8f2482f6fce891dad56603fb6c2016f1739e45b417b30f9a04c29905be64f040d9a16b2560ecfd9d181ac4c069f67c0d562edee604a8aab7b212ac642cee50d6
   languageName: node
   linkType: hard
 
+"mq-polyfill@patch:mq-polyfill@npm:1.1.8#.yarn/patches/mq-polyfill-npm-1.1.8-62fe162439.patch::locator=%40pybricks%2Fpybricks-code%40workspace%3A.":
+  version: 1.1.8
+  resolution: "mq-polyfill@patch:mq-polyfill@npm%3A1.1.8#.yarn/patches/mq-polyfill-npm-1.1.8-62fe162439.patch::version=1.1.8&hash=504382&locator=%40pybricks%2Fpybricks-code%40workspace%3A."
+  checksum: 194ca010f95506baf86642c5d88189c3dcaa96a0adb54d5a238003666daaa9e94e0553745936bc0637215b89aee235971469db1b5c70dc96aabd513c3913a55c
+  languageName: node
+  linkType: hard
+
 "ms@npm:2.0.0":
   version: 2.0.0
   resolution: "ms@npm:2.0.0"