{children}
diff --git a/client/modules/IDE/components/VersionPicker.jsx b/client/modules/IDE/components/VersionPicker.jsx
index c80a35e806..cd891d020c 100644
--- a/client/modules/IDE/components/VersionPicker.jsx
+++ b/client/modules/IDE/components/VersionPicker.jsx
@@ -10,8 +10,9 @@ import { p5Versions } from '../../../../common/p5Versions';
import MenuItem from '../../../components/Dropdown/MenuItem';
import DropdownMenu from '../../../components/Dropdown/DropdownMenu';
import { updateFileContent } from '../actions/files';
+// eslint-disable-next-line import/no-cycle
import { CmControllerContext } from '../pages/IDEView';
-import { DropdownArrowIcon } from '../.././../common/icons';
+import { DropdownArrowIcon } from '../../../common/icons';
const VersionPickerButton = styled.div`
display: flex;
diff --git a/client/modules/IDE/hooks/useP5Version.jsx b/client/modules/IDE/hooks/useP5Version.jsx
index 643a01cf7e..fc191788ca 100644
--- a/client/modules/IDE/hooks/useP5Version.jsx
+++ b/client/modules/IDE/hooks/useP5Version.jsx
@@ -196,6 +196,7 @@ export function P5VersionProvider(props) {
return null;
}, [indexSrc]);
+ // eslint-disable-next-line react/jsx-no-constructed-context-values
const value = { indexID, versionInfo };
return (
diff --git a/client/modules/IDE/utils/consoleStyles.js b/client/modules/IDE/utils/consoleStyles.js
index 62bba0c6fb..83d53b49c3 100644
--- a/client/modules/IDE/utils/consoleStyles.js
+++ b/client/modules/IDE/utils/consoleStyles.js
@@ -160,14 +160,6 @@ const getConsoleFeedStyle = (theme, fontSize) => {
};
switch (theme) {
- case 'light':
- default:
- return Object.assign(
- CONSOLE_FEED_LIGHT_STYLES || {},
- CONSOLE_FEED_LIGHT_ICONS,
- CONSOLE_FEED_SIZES,
- style
- );
case 'dark':
return Object.assign(
CONSOLE_FEED_DARK_STYLES || {},
@@ -182,6 +174,14 @@ const getConsoleFeedStyle = (theme, fontSize) => {
CONSOLE_FEED_SIZES,
style
);
+ case 'light':
+ default:
+ return Object.assign(
+ CONSOLE_FEED_LIGHT_STYLES || {},
+ CONSOLE_FEED_LIGHT_ICONS,
+ CONSOLE_FEED_SIZES,
+ style
+ );
}
};
diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss
index ad17249932..90e11ba208 100644
--- a/client/styles/base/_base.scss
+++ b/client/styles/base/_base.scss
@@ -51,7 +51,7 @@ button {
.root-app,
.app {
min-height: 100%;
- height: 100%;
+ height: 100vh;
}
a {
diff --git a/client/styles/components/_preview-frame.scss b/client/styles/components/_preview-frame.scss
index f56a0d9d27..81d497bb05 100644
--- a/client/styles/components/_preview-frame.scss
+++ b/client/styles/components/_preview-frame.scss
@@ -3,7 +3,8 @@
.preview-frame-holder {
display: flex;
flex-direction: column;
- height: 100%;
+ height: 100% !important;
+ overflow: hidden;
}
.preview-frame-overlay {
diff --git a/client/styles/main.scss b/client/styles/main.scss
index 8f97079bdd..42a7b04b4b 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -6,11 +6,11 @@
@import 'base/reset';
@import 'base/base';
-@import '../../node_modules/codemirror/lib/codemirror';
-@import '../../node_modules/codemirror/addon/lint/lint';
-@import '../../node_modules/codemirror-colorpicker/addon/codemirror-colorpicker';
-@import '../../node_modules/dropzone/dist/dropzone';
-@import '../../node_modules/primer-tooltips/build/build';
+@import '~codemirror/lib/codemirror';
+@import '~codemirror/addon/lint/lint';
+@import '~codemirror-colorpicker/addon/codemirror-colorpicker';
+@import '~dropzone/dist/dropzone';
+@import '~primer-tooltips/build/build';
@import 'components/p5-light-codemirror-theme';
@import 'components/p5-dark-codemirror-theme';
diff --git a/client/test-utils.js b/client/test-utils.js
index b8594842f0..9b7c8aab31 100644
--- a/client/test-utils.js
+++ b/client/test-utils.js
@@ -12,7 +12,7 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import { render } from '@testing-library/react';
-import React from 'react';
+import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { Provider } from 'react-redux';
import { Router } from 'react-router-dom';
@@ -34,9 +34,10 @@ export * from '@testing-library/react';
const ResponsiveProvider = ({ children, mobile, deviceWidth }) => {
const width = deviceWidth ?? (mobile ? 400 : 1000);
+ const value = useMemo(() => ({ width }), [width]);
return (
// eslint-disable-next-line react/jsx-filename-extension
-