(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
openmrs · Aug 8, 2024 · 964cc2a · 964cc2a
1 parent f32c0df
commit 964cc2a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 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
@@ -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
@@ -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%;