diff --git a/__tests__/src/components/Workspace.test.js b/__tests__/src/components/Workspace.test.js
index 3f1fd853e79f7aec16a9fad1ab6b05b789675b1b..493598f751109c49936e69dd95271179c79dbbdb 100644
--- a/__tests__/src/components/Workspace.test.js
+++ b/__tests__/src/components/Workspace.test.js
@@ -83,22 +83,6 @@ describe('Workspace', () => {
     });
   });
 
-  describe('when the workspace control panel is displayed', () => {
-    it('has the *-with-control-panel class applied', () => {
-      const { container } = createWrapper();
-
-      expect(container.querySelector('.mirador-workspace-with-control-panel')).toBeInTheDocument();
-    });
-  });
-
-  describe('when the workspace control panel is not displayed', () => {
-    it('does not have the *-with-control-panel class applied', () => {
-      const { container } = createWrapper({ isWorkspaceControlPanelVisible: false });
-
-      expect(container.querySelector('.mirador-workspace-with-control-panel')).not.toBeInTheDocument();
-    });
-  });
-
   describe('drag and drop', () => {
     it('adds a new catalog entry from a manifest', async () => {
       const manifestJson = '{ "data": "123" }';
@@ -106,7 +90,7 @@ describe('Workspace', () => {
       const addWindow = jest.fn();
 
       const { container } = createWrapper({ addWindow });
-      const dropTarget = container.querySelector('.mirador-workspace-with-control-panel');
+      const dropTarget = container.querySelector('.mirador-workspace-viewport');
 
       const file = new File([manifestJson], 'manifest.json', { type: 'application/json' });
       const dataTransfer = {
@@ -129,7 +113,7 @@ describe('Workspace', () => {
 
       const { container } = createWrapper({ addWindow, allowNewWindows: false });
 
-      const dropTarget = container.querySelector('.mirador-workspace-with-control-panel');
+      const dropTarget = container.querySelector('.mirador-workspace-viewport');
 
       const file = new File([manifestJson], 'manifest.json', { type: 'application/json' });
       const dataTransfer = {
diff --git a/src/components/Workspace.js b/src/components/Workspace.js
index 8963e182326b98de4e1e60800af67ba4e2c20faf..b8d48d33a743fbb6dc6989080cc49194b6a860b3 100644
--- a/src/components/Workspace.js
+++ b/src/components/Workspace.js
@@ -12,23 +12,10 @@ import WorkspaceElastic from '../containers/WorkspaceElastic';
 import ns from '../config/css-ns';
 import { IIIFDropTarget } from './IIIFDropTarget';
 
-const Root = styled('div', { name: 'Workspace', slot: 'root' })(({ ownerState, theme }) => ({
-  '@media (min-width: 600px)': {
-    ...(ownerState.isWorkspaceControlPanelVisible && {
-      paddingLeft: theme.spacing(8.5),
-      paddingTop: 0,
-    }),
-  },
-  ...(ownerState.isWorkspaceControlPanelVisible && {
-    paddingTop: theme.spacing(9.25),
-  }),
-  bottom: 0,
-  left: 0,
-  margin: 0,
-  overflow: 'hidden',
-  position: 'absolute',
-  right: 0,
-  top: 0,
+const Root = styled('div', { name: 'Workspace', slot: 'root' })(() => ({
+  height: '100%',
+  position: 'relative',
+  width: '100%',
 }));
 
 /**
@@ -135,7 +122,7 @@ export class Workspace extends Component {
    * render
    */
   render() {
-    const { isWorkspaceControlPanelVisible, t } = this.props;
+    const { t } = this.props;
 
     return (
       <IIIFDropTarget onDrop={this.handleDrop}>
@@ -144,7 +131,6 @@ export class Workspace extends Component {
           className={
             classNames(
               ns('workspace-viewport'),
-              (isWorkspaceControlPanelVisible && ns('workspace-with-control-panel')),
             )
           }
         >
@@ -159,7 +145,6 @@ export class Workspace extends Component {
 Workspace.propTypes = {
   addWindow: PropTypes.func,
   allowNewWindows: PropTypes.bool,
-  isWorkspaceControlPanelVisible: PropTypes.bool.isRequired,
   maximizedWindowIds: PropTypes.arrayOf(PropTypes.string),
   t: PropTypes.func.isRequired,
   windowIds: PropTypes.arrayOf(PropTypes.string),
diff --git a/src/components/WorkspaceAdd.js b/src/components/WorkspaceAdd.js
index cced34789c9e064d3fdc0d71deb7297847360639..6e744878c40c1503314274002e1fe6cca2c6de97 100644
--- a/src/components/WorkspaceAdd.js
+++ b/src/components/WorkspaceAdd.js
@@ -25,13 +25,6 @@ const StyledWorkspaceAdd = styled('div')(() => ({
   height: '100%',
   overflowX: 'hidden',
   overflowY: 'auto',
-  paddingTop: 68,
-  // injection order matters
-  // eslint-disable-next-line sort-keys
-  '@media (min-width: 600px)': {
-    paddingLeft: 68,
-    paddingTop: 0,
-  },
 }));
 
 const StyledMiradorMenuButton = styled(MiradorMenuButton)(() => ({
diff --git a/src/components/WorkspaceArea.js b/src/components/WorkspaceArea.js
index 66479271a8f2e3b2c0074dce73cbfc8835410dcd..f5c93a1464f64acb6b728ca98a826226191566f4 100644
--- a/src/components/WorkspaceArea.js
+++ b/src/components/WorkspaceArea.js
@@ -8,20 +8,29 @@ import WorkspaceAdd from '../containers/WorkspaceAdd';
 import BackgroundPluginArea from '../containers/BackgroundPluginArea';
 import ns from '../config/css-ns';
 
-const Root = styled('main', { name: 'WorkspaceArea', slot: 'root' })(({ theme }) => {
+const Root = styled('div', { name: 'WorkspaceArea', slot: 'root' })(({ theme }) => {
   const getBackgroundColor = theme.palette.mode === 'light' ? darken : lighten;
 
   return {
     background: getBackgroundColor(theme.palette.grey.A200, 0.1),
     bottom: 0,
+    display: 'flex',
+    flexDirection: 'column',
     left: 0,
-    overflow: 'hidden',
     position: 'absolute',
     right: 0,
     top: 0,
+    [theme.breakpoints.up('sm')]: {
+      flexDirection: 'row',
+    },
   };
 });
 
+const ViewerArea = styled('main', { name: 'WorkspaceArea', slot: 'viewer' })(() => ({
+  flexGrow: 1,
+  position: 'relative',
+}));
+
 /**
  * This is the top level Mirador component.
  * @prop {Object} manifests
@@ -42,12 +51,12 @@ export class WorkspaceArea extends Component {
     } = this.props;
 
     return (
-      <>
+      <Root ownerState={this.props}>
         {
           isWorkspaceControlPanelVisible
             && <WorkspaceControlPanel variant={controlPanelVariant} />
         }
-        <Root
+        <ViewerArea
           className={ns('viewer')}
           lang={lang}
           aria-label={t('workspace')}
@@ -60,8 +69,8 @@ export class WorkspaceArea extends Component {
           }
           <ErrorDialog />
           <BackgroundPluginArea />
-        </Root>
-      </>
+        </ViewerArea>
+      </Root>
     );
   }
 }
diff --git a/src/components/WorkspaceControlPanel.js b/src/components/WorkspaceControlPanel.js
index ddcd967284ca3a0b4000c4288316f3fe22c12e37..1331341330cc8ff29e1199eb1f21f98ad6b2b325 100644
--- a/src/components/WorkspaceControlPanel.js
+++ b/src/components/WorkspaceControlPanel.js
@@ -14,10 +14,9 @@ const Root = styled(AppBar, { name: 'WorkspaceControlPanel', slot: 'root' })(({
   height: 64,
   padding: theme.spacing(1),
   paddingBottom: 0,
+  position: 'relative',
   [theme.breakpoints.up('sm')]: {
-    height: '100%',
-    left: 0,
-    right: 'auto',
+    height: 'auto',
     width: ownerState.variant === 'wide' ? 'auto' : 64,
   },
   ...(ownerState.variant === 'wide' && {
diff --git a/src/containers/Workspace.js b/src/containers/Workspace.js
index b7a8881f87923414cebff803a0923557c40ba953..f9288e8d94c750a2e8bcafb881abbbea7779bf55 100644
--- a/src/containers/Workspace.js
+++ b/src/containers/Workspace.js
@@ -17,7 +17,6 @@ import * as actions from '../state/actions';
 const mapStateToProps = state => (
   {
     allowNewWindows: getConfig(state).workspace.allowNewWindows,
-    isWorkspaceControlPanelVisible: getConfig(state).workspaceControlPanel.enabled,
     maximizedWindowIds: getMaximizedWindowsIds(state),
     windowIds: getWindowIds(state),
     workspaceId: getWorkspace(state).id,