From 1961328a13d238ba235458dca8822b65d94cd290 Mon Sep 17 00:00:00 2001
From: Chris Beer <chris@cbeer.info>
Date: Tue, 19 Dec 2023 16:36:17 -0800
Subject: [PATCH] Use flexbox to lay out the workspace

---
 __tests__/src/components/Workspace.test.js | 20 ++---------------
 src/components/Workspace.js                | 25 +++++-----------------
 src/components/WorkspaceAdd.js             |  7 ------
 src/components/WorkspaceArea.js            | 21 ++++++++++++------
 src/components/WorkspaceControlPanel.js    |  5 ++---
 src/containers/Workspace.js                |  1 -
 6 files changed, 24 insertions(+), 55 deletions(-)

diff --git a/__tests__/src/components/Workspace.test.js b/__tests__/src/components/Workspace.test.js
index 3f1fd853e..493598f75 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 8963e1823..b8d48d33a 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 cced34789..6e744878c 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 66479271a..f5c93a146 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 ddcd96728..133134133 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 b7a8881f8..f9288e8d9 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,
-- 
GitLab