From 964cc2a6a6561a3f288786036a8f7f6cad53a28b Mon Sep 17 00:00:00 2001
From: Vineet Sharma <sharmava05@gmail.com>
Date: Thu, 8 Aug 2024 12:03:29 +0530
Subject: [PATCH] (fix) O3-3760: Action Menu (Siderail) inside workspace
 hovering over the content (#1110)

* Increase the workspace width and give margin to workspace content for accomodating siderail

* Workspace content should have spacing for internal sidebars
---
 .../workspace-container.component.tsx         |  6 +++-
 .../container/workspace.module.scss           | 32 ++++++++++++-------
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx b/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx
index 9280c9fe8..603542550 100644
--- a/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx
+++ b/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx
@@ -225,7 +225,11 @@ function Workspace({ workspaceInstance, additionalWorkspaceProps }: WorkspacePro
             )}
           </HeaderGlobalBar>
         </Header>
-        <div className={styles.workspaceContent}>
+        <div
+          className={classNames(styles.workspaceContent, {
+            [styles.marginWorkspaceContent]: hasOwnSidebar,
+          })}
+        >
           <WorkspaceRenderer
             key={workspaceInstance.name}
             workspace={workspaceInstance}
diff --git a/packages/framework/esm-styleguide/src/workspaces/container/workspace.module.scss b/packages/framework/esm-styleguide/src/workspaces/container/workspace.module.scss
index 794cf23be..7d9770aa3 100644
--- a/packages/framework/esm-styleguide/src/workspaces/container/workspace.module.scss
+++ b/packages/framework/esm-styleguide/src/workspaces/container/workspace.module.scss
@@ -5,6 +5,10 @@
 
 $actionPanelOffset: 3rem;
 
+$narrowWorkspaceWidth: 26.25rem;
+$widerWorkspaceWidth: 32.25rem;
+$extraWideWorkspaceWidth: 48.25rem;
+
 .loader {
   display: flex;
   background-color: $openmrs-background-grey;
@@ -103,50 +107,50 @@ $actionPanelOffset: 3rem;
   }
 
   .extraWideWorkspace {
-    width: 48.25rem;
+    width: $extraWideWorkspaceWidth;
 
     .workspaceFixedContainer {
-      width: 48.25rem;
+      width: $extraWideWorkspaceWidth;
     }
 
     &.hiddenRelative {
-      margin-right: -48.25rem !important;
+      margin-right: -$extraWideWorkspaceWidth !important;
     }
 
     .hiddenFixed {
-      right: -48.25rem !important;
+      right: -$extraWideWorkspaceWidth !important;
     }
   }
 
   .widerWorkspace {
-    width: 32.25rem;
+    width: $widerWorkspaceWidth;
 
     .workspaceFixedContainer {
-      width: 32.25rem;
+      width: $widerWorkspaceWidth;
     }
 
     &.hiddenRelative {
-      margin-right: -32.25rem !important;
+      margin-right: -$widerWorkspaceWidth !important;
     }
 
     .hiddenFixed {
-      right: -32.25rem !important;
+      right: -$widerWorkspaceWidth !important;
     }
   }
 
   .narrowWorkspace {
-    width: 26.25rem;
+    width: $narrowWorkspaceWidth;
 
     .workspaceFixedContainer {
-      width: 26.25rem;
+      width: $narrowWorkspaceWidth;
     }
 
     &.hiddenRelative {
-      margin-right: -26.25rem !important;
+      margin-right: -$narrowWorkspaceWidth !important;
     }
 
     .hiddenFixed {
-      right: -26.25rem !important;
+      right: -$narrowWorkspaceWidth !important;
     }
   }
 
@@ -156,6 +160,10 @@ $actionPanelOffset: 3rem;
     flex-grow: 1;
   }
 
+  .marginWorkspaceContent {
+    margin-right: $actionPanelOffset;
+  }
+
   // The parcel makes a div, between the workspace container and the workspace itself
   .workspaceContent > div {
     height: 100%;