From b90842131392a6521b802a0cb6aeae8fdc018dcf Mon Sep 17 00:00:00 2001
From: kamleshyadav9929 <9929raoyadav6@gmail.com>
Date: Sat, 31 Jan 2026 12:49:16 +0530
Subject: [PATCH] fix: toolbar icons and hamburger overlapping with sidebar on
 small viewports (#17)

---
 .../components/Workflow/ActionsToolbar.tsx    |   2 +-
 .../src/theme/workflow.scss                   | 142 ++++++++++++++++++
 2 files changed, 143 insertions(+), 1 deletion(-)

diff --git a/frontend/packages/volto-workflow-manager/src/components/Workflow/ActionsToolbar.tsx b/frontend/packages/volto-workflow-manager/src/components/Workflow/ActionsToolbar.tsx
index d571f68..ac57ef6 100644
--- a/frontend/packages/volto-workflow-manager/src/components/Workflow/ActionsToolbar.tsx
+++ b/frontend/packages/volto-workflow-manager/src/components/Workflow/ActionsToolbar.tsx
@@ -97,7 +97,7 @@ const ActionsToolbar = ({ workflowId }: { workflowId: string }) => {
 
   return (
     <>
-      <Flex justifyContent="start" alignItems="center" gap="size-100">
+      <Flex justifyContent="start" alignItems="center" gap="size-100" UNSAFE_className="actions-toolbar">
         <ButtonGroup>
           <Button variant="accent" onPress={() => setCreateStateOpen(true)}>
             <Icon name={add} size="20px" />
diff --git a/frontend/packages/volto-workflow-manager/src/theme/workflow.scss b/frontend/packages/volto-workflow-manager/src/theme/workflow.scss
index af66671..ca4482a 100644
--- a/frontend/packages/volto-workflow-manager/src/theme/workflow.scss
+++ b/frontend/packages/volto-workflow-manager/src/theme/workflow.scss
@@ -26,3 +26,145 @@ body.section-controlpanel.section-workflowmanager.is-authenticated.cms-ui.has-to
     }
   }
 }
+
+// ============================================
+// RESPONSIVE FIXES: Issue #17
+// Fix toolbar icons and hamburger overlapping with sidebar
+// ============================================
+
+// Sidebar responsive adjustments
+#sidebar {
+  z-index: 100;
+
+  .sidebar-container {
+    // Ensure sidebar doesn't overlap with Volto toolbar on smaller screens
+    @media (max-width: 768px) {
+      z-index: 99; // Below the Volto toolbar (z-index: 100+)
+      
+      // Adjust trigger button position on smaller screens
+      .trigger {
+        margin-left: -30px;
+      }
+
+      // Make tabs more compact
+      .sidebar-tabs-header {
+        padding: 0 4px;
+
+        [role="tablist"] {
+          gap: 0;
+          
+          [role="tab"] {
+            font-size: 12px;
+            padding: 6px 8px;
+          }
+        }
+      }
+    }
+
+    // Very small viewports - stack sidebar below content
+    @media (max-width: 480px) {
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      left: 80px; // Leave space for collapsed Volto toolbar
+      top: auto;
+      height: 40vh;
+      width: auto;
+      border-top: 2px solid var(--spectrum-gray-300);
+      border-radius: 8px 8px 0 0;
+      
+      .trigger {
+        display: none; // Hide trigger in stacked mode
+      }
+
+      &.collapsed {
+        height: 44px;
+        
+        .trigger {
+          display: block;
+          position: absolute;
+          top: 8px;
+          left: -24px;
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}
+
+// Volto toolbar adjustments to prevent overlap
+.toolbar {
+  @media (max-width: 768px) {
+    z-index: 101; // Ensure toolbar hamburger is above sidebar
+
+    // Make sure expanded toolbar doesn't cover sidebar trigger
+    &.expanded {
+      ~ #sidebar .sidebar-container .trigger {
+        margin-left: -25px;
+      }
+    }
+  }
+}
+
+// Actions toolbar (ActionsToolbar.tsx) responsive adjustments
+// Make button group wrap on smaller screens
+.actions-toolbar {
+  @media (max-width: 768px) {
+    flex-wrap: wrap;
+    gap: 8px;
+
+    [class*="ButtonGroup"] {
+      flex-wrap: wrap;
+      gap: 4px;
+
+      button {
+        font-size: 12px;
+        padding: 6px 10px;
+
+        // Hide button text, show only icons on very small screens
+        @media (max-width: 480px) {
+          span:not([class*="Icon"]) {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Workflow header responsiveness
+.workflow-header {
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+}
+
+// Ensure proper spacing when sidebar is expanded
+body.has-sidebar {
+  @media (max-width: 768px) {
+    // Reduce main content padding to make room for sidebar
+    .workflow-view-container,
+    [data-workflow-view] {
+      padding-right: 280px; // Slightly less than full sidebar width
+    }
+  }
+
+  @media (max-width: 480px) {
+    .workflow-view-container,
+    [data-workflow-view] {
+      padding-right: 0;
+      padding-bottom: 42vh; // Make room for stacked sidebar
+    }
+  }
+}
+
+body.has-sidebar-collapsed {
+  @media (max-width: 480px) {
+    .workflow-view-container,
+    [data-workflow-view] {
+      padding-bottom: 50px; // Minimal space for collapsed sidebar
+    }
+  }
+}