Fixes #17 - Toolbar icons and hamburger icon overlapping with sidebar in smaller viewports.

[kamleshyadav9929]

🐞 Problem

On viewports smaller than 768px, the Plone toolbar icons and sidebar container were overlapping due to missing responsive styles and improper z-index handling.

---

✅ Solution

Implemented responsive CSS and proper stacking order to ensure the toolbar and sidebar render correctly across all screen sizes.

---

🔧 Changes Made

src/theme/workflow.scss

• Added z-index management to prevent overlap:
  • Toolbar: z-index: 101
  • Sidebar: z-index: 99
• Added responsive adjustments for viewports ≤ 768px
  • Compact tabs
  • Adjusted trigger positioning
• Added mobile layout support for viewports ≤ 480px
  • Sidebar stacks at the bottom of the screen
• Enabled button wrapping for the actions toolbar on smaller screens

src/components/Workflow/ActionsToolbar.tsx

• Added UNSAFE_className="actions-toolbar" to enable responsive CSS targeting

---

🧪 Testing

• Verified layout behavior on desktop, tablet, and mobile viewports
• Confirmed toolbar and sidebar no longer overlap on small screens

---

📱 Screens Affected

• Tablets (≤ 768px)
• Mobile devices (≤ 480px)