diff --git a/src/lib/viewers/controls/hooks/__tests__/useClickOutside-test.tsx b/src/lib/viewers/controls/hooks/__tests__/useClickOutside-test.tsx
index 9e3fd34b2..872a6dc91 100644
--- a/src/lib/viewers/controls/hooks/__tests__/useClickOutside-test.tsx
+++ b/src/lib/viewers/controls/hooks/__tests__/useClickOutside-test.tsx
@@ -3,12 +3,8 @@ import noop from 'lodash/noop';
 import { mount, ReactWrapper } from 'enzyme';
 import useClickOutside from '../useClickOutside';
 
-type Props = {
-    callback?: () => void;
-};
-
 describe('useClickOutside', () => {
-    function TestComponent({ callback = noop }: Props): JSX.Element {
+    function TestComponent({ callback = noop }: { callback?: () => void }): JSX.Element {
         const ref = React.createRef<HTMLButtonElement>();
 
         useClickOutside(ref, callback);
@@ -22,7 +18,7 @@ describe('useClickOutside', () => {
         );
     }
 
-    const getWrapper = (props: Props): ReactWrapper =>
+    const getWrapper = (props: { callback?: () => void }): ReactWrapper =>
         mount(
             <div>
                 <TestComponent {...props} />
@@ -49,7 +45,7 @@ describe('useClickOutside', () => {
             element.click();
         }
 
-        expect(element).toBeTruthy();
+        expect(element).toBeDefined();
         expect(callback.mock.calls.length).toBe(isCalled ? 1 : 0);
     });
 });
diff --git a/src/lib/viewers/controls/settings/Settings.tsx b/src/lib/viewers/controls/settings/Settings.tsx
index 6a6c8d3b3..2557c0759 100644
--- a/src/lib/viewers/controls/settings/Settings.tsx
+++ b/src/lib/viewers/controls/settings/Settings.tsx
@@ -35,6 +35,7 @@ export default function Settings({
         setIsFocused(false);
         setIsOpen(false);
     }, []);
+    const { height, width } = activeRect || { height: 'auto', width: 'auto' };
 
     const handleClick = (): void => {
         setActiveMenu(Menu.MAIN);
@@ -63,8 +64,6 @@ export default function Settings({
 
     useClickOutside(controlsElRef, resetControls);
 
-    const { height, width } = activeRect || { height: 'auto', width: 'auto' };
-
     return (
         <div
             ref={controlsElRef}
@@ -74,13 +73,13 @@ export default function Settings({
             {...rest}
         >
             <SettingsContext.Provider value={{ activeMenu, setActiveMenu, setActiveRect }}>
-                <SettingsToggle ref={buttonElRef} isOpen={isOpen} onClick={handleClick} />
-                <SettingsFlyout
-                    className={classNames({ [`${className}-flyout`]: className })}
-                    height={height}
+                <SettingsToggle
+                    ref={buttonElRef}
+                    className="bp-Settings-toggle"
                     isOpen={isOpen}
-                    width={width}
-                >
+                    onClick={handleClick}
+                />
+                <SettingsFlyout className="bp-Settings-flyout" height={height} isOpen={isOpen} width={width}>
                     {children}
                 </SettingsFlyout>
             </SettingsContext.Provider>
diff --git a/src/lib/viewers/controls/settings/SettingsMenu.scss b/src/lib/viewers/controls/settings/SettingsMenu.scss
index 91a97670e..5cf6e9284 100644
--- a/src/lib/viewers/controls/settings/SettingsMenu.scss
+++ b/src/lib/viewers/controls/settings/SettingsMenu.scss
@@ -1,8 +1,4 @@
 .bp-SettingsMenu {
-    display: none;
+    display: table;
     padding: 8px;
-
-    &.bp-is-active {
-        display: table;
-    }
 }
diff --git a/src/lib/viewers/controls/settings/SettingsMenu.tsx b/src/lib/viewers/controls/settings/SettingsMenu.tsx
index 4718e5fe3..5603fa3c7 100644
--- a/src/lib/viewers/controls/settings/SettingsMenu.tsx
+++ b/src/lib/viewers/controls/settings/SettingsMenu.tsx
@@ -27,12 +27,7 @@ export default function SettingsMenu({ children, className, name }: Props): JSX.
     }
 
     return (
-        <SettingsList
-            ref={menuElRef}
-            className={classNames('bp-SettingsMenu', className, { 'bp-is-active': isActive })}
-            role="menu"
-            tabIndex={0}
-        >
+        <SettingsList ref={menuElRef} className={classNames('bp-SettingsMenu', className)} role="menu" tabIndex={0}>
             {children}
         </SettingsList>
     );
diff --git a/src/lib/viewers/controls/settings/__tests__/Settings-test.tsx b/src/lib/viewers/controls/settings/__tests__/Settings-test.tsx
index 4b667ac82..378ae320f 100644
--- a/src/lib/viewers/controls/settings/__tests__/Settings-test.tsx
+++ b/src/lib/viewers/controls/settings/__tests__/Settings-test.tsx
@@ -4,6 +4,7 @@ import { mount, ReactWrapper } from 'enzyme';
 import Settings from '../Settings';
 import SettingsGearToggle from '../SettingsToggle';
 import SettingsFlyout from '../SettingsFlyout';
+import SettingsContext from '../SettingsContext';
 
 describe('Settings', () => {
     const getHostNode = (): HTMLDivElement => {
@@ -94,6 +95,17 @@ describe('Settings', () => {
             expect(wrapper.exists(SettingsGearToggle)).toBe(true);
         });
 
+        describe('flyout dimensions', () => {
+            test('should apply activeRect dimensions if present', () => {
+                const wrapper = getWrapper();
+
+                wrapper.find(SettingsGearToggle).simulate('click');
+
+                expect(wrapper.find(SettingsFlyout).prop('height')).toBe('auto');
+                expect(wrapper.find(SettingsFlyout).prop('width')).toBe('auto');
+            });
+        });
+
         describe('toggle prop', () => {
             function CustomToggle(
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/src/lib/viewers/controls/settings/__tests__/SettingsMenu-test.tsx b/src/lib/viewers/controls/settings/__tests__/SettingsMenu-test.tsx
index b43f92ef5..0f33bc294 100644
--- a/src/lib/viewers/controls/settings/__tests__/SettingsMenu-test.tsx
+++ b/src/lib/viewers/controls/settings/__tests__/SettingsMenu-test.tsx
@@ -69,17 +69,17 @@ describe('SettingsMenu', () => {
     });
 
     describe('render', () => {
-        test('should set classes based on the active menu', () => {
+        test('should render based on the active menu', () => {
             const context = getContext({ activeMenu: Menu.MAIN });
             const wrapper = getWrapper({ name: Menu.MAIN }, context);
 
-            expect(wrapper.childAt(0).hasClass('bp-is-active')).toBe(true);
+            expect(wrapper.exists()).toBe(true);
 
             context.activeMenu = Menu.AUTOPLAY;
             wrapper.setProps({}); // Force re-render
             wrapper.update();
 
-            expect(wrapper.childAt(0).hasClass('bp-is-active')).toBe(false);
+            expect(wrapper.isEmptyRender()).toBe(true);
         });
 
         test('should return a valid wrapper', () => {