@openmrs/esm-styleguide 8.0.1-pre.3705 → 8.0.1-pre.3723

package/dist/workspaces2/action-menu2/action-menu2.component.d.ts

@@ -12,6 +12,6 @@ export interface ActionMenuProps {
  * for a workspace group. The action menu is only rendered when at least one
  * window in the workspace group has an icon defined.
  */
-export declare function ActionMenu({ workspaceGroup, groupProps }: ActionMenuProps): React.JSX.Element | null;
+export declare function ActionMenu({ workspaceGroup, groupProps }: ActionMenuProps): React.JSX.Element;
 export default ActionMenu;
 //# sourceMappingURL=action-menu2.component.d.ts.map

package/dist/workspaces2/action-menu2/action-menu2.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action-menu2.component.d.ts","sourceRoot":"","sources":["../../../src/workspaces2/action-menu2/action-menu2.component.tsx"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAOtE,MAAM,WAAW,eAAe;IAC9B,cAAc,EAAE,yBAAyB,GAAG;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC;CACxC;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,EAAE,eAAe,4BAgDzE;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"action-menu2.component.d.ts","sourceRoot":"","sources":["../../../src/workspaces2/action-menu2/action-menu2.component.tsx"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAOtE,MAAM,WAAW,eAAe;IAC9B,cAAc,EAAE,yBAAyB,GAAG;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC;CACxC;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,EAAE,eAAe,qBA8BzE;AAED,eAAe,UAAU,CAAC"}

package/dist/workspaces2/active-workspace-window.component.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { type OpenedWindow } from '@openmrs/esm-extensions';
 interface WorkspaceWindowProps {
     openedWindow: OpenedWindow;
+    showActionMenu: boolean;
 }
 /**
  * Renders an opened workspace window.

package/dist/workspaces2/active-workspace-window.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"active-workspace-window.component.d.ts","sourceRoot":"","sources":["../../src/workspaces2/active-workspace-window.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAK5D,OAAO,EAAE,KAAK,YAAY,EAAyC,MAAM,yBAAyB,CAAC;AAOnG,UAAU,oBAAoB;IAC5B,YAAY,EAAE,YAAY,CAAC;CAC5B;AACD;;GAEG;AACH,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA4BzD,CAAC;AAyGF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"active-workspace-window.component.d.ts","sourceRoot":"","sources":["../../src/workspaces2/active-workspace-window.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAK5D,OAAO,EAAE,KAAK,YAAY,EAAyC,MAAM,yBAAyB,CAAC;AAOnG,UAAU,oBAAoB;IAC5B,YAAY,EAAE,YAAY,CAAC;IAC3B,cAAc,EAAE,OAAO,CAAC;CACzB;AACD;;GAEG;AACH,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6BzD,CAAC;AA6GF,eAAe,qBAAqB,CAAC"}

package/dist/workspaces2/workspace2.component.d.ts

@@ -32,6 +32,7 @@ export interface Workspace2DefinitionProps<WorkspaceProps extends object = objec
     workspaceName: string;
     windowName: string;
     isRootWorkspace: boolean;
+    showActionMenu: boolean;
 }
 /**
  * @experimental

package/dist/workspaces2/workspace2.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"workspace2.component.d.ts","sourceRoot":"","sources":["../../src/workspaces2/workspace2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAWzD,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB,CACxC,cAAc,SAAS,MAAM,GAAG,MAAM,EACtC,WAAW,SAAS,MAAM,GAAG,MAAM,EACnC,UAAU,SAAS,MAAM,GAAG,MAAM;IAElC;;;;;;OAMG;IACH,oBAAoB,CAAC,KAAK,SAAS,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAEhG;;;;;OAKG;IACH,cAAc,CAAC,OAAO,CAAC,EAAE;QAAE,WAAW,CAAC,EAAE,OAAO,CAAC;QAAC,qBAAqB,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAEvG,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,MAAM,oBAAoB,CAC9B,cAAc,SAAS,MAAM,EAC7B,WAAW,SAAS,MAAM,EAC1B,UAAU,SAAS,MAAM,IACvB,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAAC,cAAc,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;AAEjF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgJhD,CAAC"}
+{"version":3,"file":"workspace2.component.d.ts","sourceRoot":"","sources":["../../src/workspaces2/workspace2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAWzD,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB,CACxC,cAAc,SAAS,MAAM,GAAG,MAAM,EACtC,WAAW,SAAS,MAAM,GAAG,MAAM,EACnC,UAAU,SAAS,MAAM,GAAG,MAAM;IAElC;;;;;;OAMG;IACH,oBAAoB,CAAC,KAAK,SAAS,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAEhG;;;;;OAKG;IACH,cAAc,CAAC,OAAO,CAAC,EAAE;QAAE,WAAW,CAAC,EAAE,OAAO,CAAC;QAAC,qBAAqB,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAEvG,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,MAAM,oBAAoB,CAC9B,cAAc,SAAS,MAAM,EAC7B,WAAW,SAAS,MAAM,EAC1B,UAAU,SAAS,MAAM,IACvB,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAAC,cAAc,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;AAEjF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA2JhD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-styleguide",
-  "version": "8.0.1-pre.3705",
+  "version": "8.0.1-pre.3723",
   "license": "MPL-2.0",
   "description": "The styleguide for OpenMRS SPA",
   "main": "dist/openmrs-esm-styleguide.js",
@@ -98,17 +98,17 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "8.0.1-pre.3705",
-    "@openmrs/esm-config": "8.0.1-pre.3705",
-    "@openmrs/esm-emr-api": "8.0.1-pre.3705",
-    "@openmrs/esm-error-handling": "8.0.1-pre.3705",
-    "@openmrs/esm-extensions": "8.0.1-pre.3705",
-    "@openmrs/esm-globals": "8.0.1-pre.3705",
-    "@openmrs/esm-navigation": "8.0.1-pre.3705",
-    "@openmrs/esm-react-utils": "8.0.1-pre.3705",
-    "@openmrs/esm-state": "8.0.1-pre.3705",
-    "@openmrs/esm-translations": "8.0.1-pre.3705",
-    "@openmrs/esm-utils": "8.0.1-pre.3705",
+    "@openmrs/esm-api": "8.0.1-pre.3723",
+    "@openmrs/esm-config": "8.0.1-pre.3723",
+    "@openmrs/esm-emr-api": "8.0.1-pre.3723",
+    "@openmrs/esm-error-handling": "8.0.1-pre.3723",
+    "@openmrs/esm-extensions": "8.0.1-pre.3723",
+    "@openmrs/esm-globals": "8.0.1-pre.3723",
+    "@openmrs/esm-navigation": "8.0.1-pre.3723",
+    "@openmrs/esm-react-utils": "8.0.1-pre.3723",
+    "@openmrs/esm-state": "8.0.1-pre.3723",
+    "@openmrs/esm-translations": "8.0.1-pre.3723",
+    "@openmrs/esm-utils": "8.0.1-pre.3723",
     "@rspack/cli": "^1.3.11",
     "@rspack/core": "^1.3.11",
     "@types/geopattern": "^1.2.9",

package/src/components/_general.scss

@@ -5,11 +5,6 @@ html {
   scroll-behavior: smooth;
 }
 
-body {
-  display: flex;
-  flex-direction: column;
-}
-
 .omrs-app-error {
   padding: layout.$spacing-11;
   width: 100%;
@@ -61,4 +56,5 @@ body {
     'topNav topNav topNav'
     'leftNav appRoots workspace';
   grid-template-columns: min-content 1fr min-content;
+  container-type: inline-size;
 }

package/src/workspaces2/action-menu2/action-menu2.component.tsx

@@ -23,17 +23,9 @@ export interface ActionMenuProps {
  * window in the workspace group has an icon defined.
  */
 export function ActionMenu({ workspaceGroup, groupProps }: ActionMenuProps) {
-  const { registeredWindowsByName } = useWorkspace2Store();
   const layout = useLayoutType();
-  const { name: groupName, persistence } = workspaceGroup;
+  const { name: persistence } = workspaceGroup;
 
-  const windowsWithIcons = Object.values(registeredWindowsByName)
-    .filter((window): window is Required<typeof window> => window.group === groupName && window.icon !== undefined)
-    .sort((a, b) => (a.order ?? Number.MAX_VALUE) - (b.order ?? Number.MAX_VALUE));
-
-  if (windowsWithIcons.length === 0) {
-    return null; // No icons to display
-  }
   const isClosable = persistence == 'closable';
 
   return (
@@ -58,16 +50,6 @@ export function ActionMenu({ workspaceGroup, groupProps }: ActionMenuProps) {
           <ExtensionSlot className={styles.container} name={workspaceGroup.name} state={{ groupProps }} />
         </ComponentContext.Provider>
       </div>
-      {isClosable && !isDesktop(layout) && (
-        <IconButton
-          align="left"
-          onClick={() => closeWorkspaceGroup2()}
-          label={getCoreTranslation('close')}
-          kind="ghost"
-        >
-          <CloseIcon />
-        </IconButton>
-      )}
     </aside>
   );
 }

package/src/workspaces2/active-workspace-window.component.tsx

@@ -12,11 +12,12 @@ import styles from './workspace2.module.scss';
 
 interface WorkspaceWindowProps {
   openedWindow: OpenedWindow;
+  showActionMenu: boolean;
 }
 /**
  * Renders an opened workspace window.
  */
-const ActiveWorkspaceWindow: React.FC<WorkspaceWindowProps> = ({ openedWindow }) => {
+const ActiveWorkspaceWindow: React.FC<WorkspaceWindowProps> = ({ openedWindow, showActionMenu }) => {
   const { openedWorkspaces } = openedWindow;
   const [lifeCycles, setLifeCycles] = useState<ParcelConfig[]>();
   const { registeredWorkspacesByName } = workspace2Store.getState();
@@ -40,6 +41,7 @@ const ActiveWorkspaceWindow: React.FC<WorkspaceWindowProps> = ({ openedWindow })
           lifeCycle={lifeCycles && lifeCycles[i] ? lifeCycles[i] : undefined}
           isRootWorkspace={i === 0}
           isLeafWorkspace={i === openedWorkspaces.length - 1}
+          showActionMenu={showActionMenu}
         />
       ))}
     </>
@@ -52,6 +54,7 @@ interface ActiveWorkspaceProps {
   openedWindow: OpenedWindow;
   isRootWorkspace: boolean;
   isLeafWorkspace: boolean;
+  showActionMenu: boolean;
 }
 
 const ActiveWorkspace: React.FC<ActiveWorkspaceProps> = ({
@@ -60,6 +63,7 @@ const ActiveWorkspace: React.FC<ActiveWorkspaceProps> = ({
   openedWindow,
   isRootWorkspace,
   isLeafWorkspace,
+  showActionMenu,
 }) => {
   const { openedGroup, closeWorkspace, openChildWorkspace } = useWorkspace2Store();
 
@@ -108,6 +112,7 @@ const ActiveWorkspace: React.FC<ActiveWorkspaceProps> = ({
         isRootWorkspace,
         isLeafWorkspace,
         windowName: openedWindow.windowName,
+        showActionMenu,
       },
     [openedWorkspace, closeWorkspace, openedGroup, openedWindow],
   );
@@ -132,6 +137,7 @@ const ActiveWorkspace: React.FC<ActiveWorkspaceProps> = ({
         <div
           className={classNames(styles.workspaceMiddleContainer, {
             [styles.isRootWorkspace]: isRootWorkspace,
+            [styles.showActionMenu]: showActionMenu,
           })}
         >
           <div

package/src/workspaces2/workspace-windows-and-menu.component.tsx

@@ -19,7 +19,7 @@ export function renderWorkspaceWindowsAndMenu(target: HTMLElement | null) {
  * and all the active workspace windows within that group.
  */
 function WorkspaceWindowsAndMenu() {
-  const { openedGroup, openedWindows, registeredGroupsByName } = useWorkspace2Store();
+  const { openedGroup, openedWindows, registeredGroupsByName, registeredWindowsByName } = useWorkspace2Store();
 
   useEffect(() => {
     const unsubscribe = subscribeOpenmrsEvent('before-page-changed', (pageChangedEvent) => {
@@ -41,6 +41,12 @@ function WorkspaceWindowsAndMenu() {
   const group = registeredGroupsByName[openedGroup.groupName];
   const hasMaximizedWindow = openedWindows.some((window) => window.maximized);
 
+  const { name: groupName } = group;
+  const windowsWithIcons = Object.values(registeredWindowsByName)
+    .filter((window): window is Required<typeof window> => window.group === groupName && window.icon !== undefined)
+    .sort((a, b) => (a.order ?? Number.MAX_VALUE) - (b.order ?? Number.MAX_VALUE));
+  const showActionMenu = windowsWithIcons.length > 0;
+
   return (
     <div
       className={classNames(styles.workspaceWindowsAndMenuContainer, {
@@ -50,10 +56,16 @@ function WorkspaceWindowsAndMenu() {
     >
       <div className={styles.workspaceWindowsContainer}>
         {openedWindows.map((openedWindow) => {
-          return <ActiveWorkspaceWindow key={openedWindow.windowName} openedWindow={openedWindow} />;
+          return (
+            <ActiveWorkspaceWindow
+              key={openedWindow.windowName}
+              openedWindow={openedWindow}
+              showActionMenu={showActionMenu}
+            />
+          );
         })}
       </div>
-      <ActionMenu workspaceGroup={group} groupProps={openedGroup.props} />
+      {showActionMenu && <ActionMenu workspaceGroup={group} groupProps={openedGroup.props} />}
     </div>
   );
 }

package/src/workspaces2/workspace2.component.tsx

@@ -6,7 +6,7 @@ import { isDesktop, useLayoutType } from '@openmrs/esm-react-utils';
 import { getCoreTranslation } from '@openmrs/esm-translations';
 import { getOpenedWindowIndexByWorkspace } from '@openmrs/esm-extensions';
 import { ArrowRightIcon, CloseIcon } from '../icons';
-import { useWorkspace2Store, useWorkspace2Context } from './workspace2';
+import { useWorkspace2Store, useWorkspace2Context, closeWorkspaceGroup2 } from './workspace2';
 import styles from './workspace2.module.scss';
 
 interface Workspace2Props {
@@ -46,6 +46,7 @@ export interface Workspace2DefinitionProps<
   workspaceName: string;
   windowName: string;
   isRootWorkspace: boolean;
+  showActionMenu: boolean;
 }
 
 /**
@@ -79,7 +80,7 @@ export const Workspace2: React.FC<Workspace2Props> = ({ title, children, hasUnsa
     setWorkspaceTitle,
     isMostRecentlyOpenedWindowHidden,
   } = useWorkspace2Store();
-  const { workspaceName, isRootWorkspace, closeWorkspace } = useWorkspace2Context();
+  const { workspaceName, isRootWorkspace, closeWorkspace, showActionMenu } = useWorkspace2Context();
 
   const openedWindowIndex = getOpenedWindowIndexByWorkspace(workspaceName);
 
@@ -145,6 +146,7 @@ export const Workspace2: React.FC<Workspace2Props> = ({ title, children, hasUnsa
           [styles.maximized]: maximized,
           [styles.hidden]: isWindowHidden,
           [styles.isRootWorkspace]: isRootWorkspace,
+          [styles.showActionMenu]: showActionMenu,
         })}
       >
         <div
@@ -154,56 +156,66 @@ export const Workspace2: React.FC<Workspace2Props> = ({ title, children, hasUnsa
             [styles.isRootWorkspace]: isRootWorkspace,
           })}
         >
-          <>
-            <Header aria-label={getCoreTranslation('workspaceHeader')} className={styles.header}>
-              <HeaderName prefix="">{title}</HeaderName>
-              <div className={styles.overlayHeaderSpacer} />
-              <HeaderGlobalBar className={styles.headerButtons}>
-                {isDesktop(layout) ? (
-                  <>
-                    {(canMaximize || maximized) && (
+          <Header aria-label={getCoreTranslation('workspaceHeader')} className={styles.header}>
+            <HeaderName prefix="">{title}</HeaderName>
+            <div className={styles.overlayHeaderSpacer} />
+            <HeaderGlobalBar className={styles.headerButtons}>
+              {isDesktop(layout) ? (
+                <>
+                  {(canMaximize || maximized) && (
+                    <HeaderGlobalAction
+                      aria-label={maximized ? getCoreTranslation('minimize') : getCoreTranslation('maximize')}
+                      onClick={() => setWindowMaximized(windowName, !maximized)}
+                    >
+                      {maximized ? <Minimize /> : <Maximize />}
+                    </HeaderGlobalAction>
+                  )}
+                  {canHide ? (
+                    <HeaderGlobalAction aria-label={getCoreTranslation('hide')} onClick={() => hideWindow()}>
+                      <ArrowRightIcon />
+                    </HeaderGlobalAction>
+                  ) : (
+                    // in desktop mode, if the group is closeable, the close button
+                    // is rendered in the side nav, not in the workspace
+                    !canCloseGroup && (
                       <HeaderGlobalAction
-                        aria-label={maximized ? getCoreTranslation('minimize') : getCoreTranslation('maximize')}
-                        onClick={() => setWindowMaximized(windowName, !maximized)}
+                        aria-label={getCoreTranslation('close')}
+                        onClick={() => closeWorkspace({ closeWindow: true })}
                       >
-                        {maximized ? <Minimize /> : <Maximize />}
+                        <CloseIcon />
                       </HeaderGlobalAction>
-                    )}
-                    {canHide ? (
-                      <HeaderGlobalAction aria-label={getCoreTranslation('hide')} onClick={() => hideWindow()}>
-                        <ArrowRightIcon />
-                      </HeaderGlobalAction>
-                    ) : (
-                      !canCloseGroup && (
-                        <HeaderGlobalAction
-                          aria-label={getCoreTranslation('close')}
-                          onClick={() => closeWorkspace({ closeWindow: true })}
-                        >
-                          <CloseIcon />
-                        </HeaderGlobalAction>
-                      )
-                    )}
-                  </>
-                ) : (
-                  <>
-                    {canHide && (
-                      <HeaderGlobalAction aria-label={getCoreTranslation('hide')} onClick={() => hideWindow()}>
-                        <DownToBottom />
-                      </HeaderGlobalAction>
-                    )}
-
+                    )
+                  )}
+                </>
+              ) : (
+                <>
+                  {canHide ? (
+                    <HeaderGlobalAction aria-label={getCoreTranslation('hide')} onClick={() => hideWindow()}>
+                      <DownToBottom />
+                    </HeaderGlobalAction>
+                  ) : (
+                    // in tablet mode, the close button is rendered regardless of
+                    // whether the group is closeable. The close button closes
+                    // the workspace group (and the side nav) if group is closeable;
+                    // otherwise it only closes the workspace window.
                     <HeaderGlobalAction
                       aria-label={getCoreTranslation('close')}
-                      onClick={() => closeWorkspace({ closeWindow: true })}
+                      onClick={() => {
+                        if (canCloseGroup) {
+                          closeWorkspaceGroup2();
+                        } else {
+                          closeWorkspace({ closeWindow: true });
+                        }
+                      }}
                     >
                       <CloseIcon />
                     </HeaderGlobalAction>
-                  </>
-                )}
-              </HeaderGlobalBar>
-            </Header>
-            <div className={classNames(styles.workspaceContent)}>{children}</div>
-          </>
+                  )}
+                </>
+              )}
+            </HeaderGlobalBar>
+          </Header>
+          <div className={classNames(styles.workspaceContent)}>{children}</div>
         </div>
       </div>
     </div>

package/src/workspaces2/workspace2.module.scss

@@ -166,8 +166,18 @@ $extraWideWorkspaceWidth: 48.25rem;
     }
   }
 
+  // fallback for browsers that don't support the container CSS feature,
+  // the width is slightly off if <body> has a vertical scrollbar
   .workspaceOuterContainer {
-    width: 100vw !important;
+    width: 100vw;
+  }
+
+  // using the container CSS feature, for browser that support it
+  //  get the container query width (i.e. width of <body>, without the scrollbars)
+  @supports (width: 100cqw) {
+    .workspaceOuterContainer {
+      width: 100cqw;
+    }
   }
 
   .workspaceMiddleContainer {
@@ -175,15 +185,25 @@ $extraWideWorkspaceWidth: 48.25rem;
     &.hidden {
       display: none;
     }
+
+    // in tablet mode, reduce the height to of the workspace window to accommodate the workspace menu (bottom nav)
+    &.showActionMenu {
+      height: calc(100% - layout.$spacing-10);
+    }
   }
 
   .workspaceInnerContainer {
-    width: 100vw !important;
+    width: 100% !important;
   }
 
   .marginWorkspaceContent {
     margin-bottom: var(--bottom-nav-height);
   }
+
+  .workspaceContent {
+    overflow-y: auto;
+    height: 100%;
+  }
 }
 
 // Overriding styles for RTL support