fix(ui-react): fix sidebar behavior when terminal is open

[luizhf42]

What

Fix the sidebar behavior on desktop and mobile when a web terminal instance is open.

Why

The sidebar was presenting two strange behaviors when the terminal was open:

1. On desktop, the sidebar occupied 220px (expanded state width) even when collapsed, adding a blank space between the collapsed sidebar and the terminal window.
2. On mobile. the sidebar was opening below the terminal, being unclickable.

The fixes:

1. Compute the sidebar offset and pass to the terminal components in order to adapt the left space style based on it.
2. Increase the sidebar z-index, making it appear above the terminal and be usable.

Testing

• On desktop, open a terminal instance and ensure the sidebar and terminal behave correctly in collapsed, expanded, and terminal fullscreen states.
• On mobile, ensure the sidebar opens, closes, and is clickable when a terminal instance is open.

[github-actions]

Claude finished @luizhf42's task in 3m 18s —— View job

---

Code Review Complete

Reviewed 6 files across code quality, security, testing, TypeScript/React patterns, and architecture — no issues found. The code looks good as-is.

The approach of passing sidebarOffset as a prop is clean and correctly replaces the hardcoded left-[220px]. The z-index bump to z-50 on the mobile drawer properly ensures it renders above the terminal panels (z-40). The simplified useSidebarLayout hook is sound — the old breakpoint-reset logic is no longer needed since the mobile drawer is conditionally rendered (!isDesktop), so unmounting handles state cleanup naturally.

If you push additional changes and want a new review, tag @shellhub-io/admin and a team member can trigger it.