fix(ui-react): fix sidebar height and content overflow in layouts

[luannmoreira]

What

Fixed two interconnected layout bugs in the console UI: the sidebar
only filling roughly half the viewport height, and page content being
silently clipped at 100vh with no scrollbar.

Why

Both bugs stem from the same root cause in AppLayout. The outer
container used min-h-screen (height: auto with a minimum), and CSS
flexbox only distributes positive free space — which doesn't exist
when a container's height is auto. As a result, the inner flex-1
row sized itself to its content, not the viewport. The sidebar's
h-full then filled the content height rather than 100vh, leaving it
short on pages with few items.

The fix (h-screen on the outer container) locks the layout to the
viewport. Without overflow-y-auto on <main>, that would clip page
content, so both changes are applied together — the same pattern
AdminLayout already used.

Changes

• AppLayout: min-h-screen → h-screen on the outer container
  so the flex chain has a defined height; overflow-y-auto added to
  <main> so content scrolls within the main area instead of being
  clipped. Redundant h-screen removed from the terminal conditional
  (already covered by the outer class).

• SidebarShell: min-h-screen → h-full on <aside> — correct
  now that the parent flex container has a defined height. Footer border
  and label visibility gated on onToggle presence to match the
  conditionally rendered pin button.

• useSidebarLayout: isOpen = isDesktop || expanded || pinned —
  sidebar is always expanded on desktop. This removes the hover-expand
  behavior intentionally; the wrapper divs carrying
  onMouseEnter/onMouseLeave were removed from both layouts as part
  of this simplification.

• onToggle made optional across SidebarShell, Sidebar, and
  AdminSidebar: the pin button renders only when onToggle is
  provided, keeping the component usable without a toggle handler.

[github-actions]

Claude finished @luannmoreira's task in 4m 19s —— View job

---

Code Review Complete

Reviewed 6 files. 2 issues found (1 high, 1 medium). 1 posted inline, 1 noted below.

min-h-screen not changed to h-full on <aside> (high)

File: ui-react/apps/console/src/components/layout/SidebarShell.tsx, line 134

The PR description states "min-h-screen → h-full on <aside>" but this change was never applied. The <aside> still uses min-h-screen, which forces it to be at least 100vh regardless of flex containment. Since the parent chain is now h-screen → flex-1 min-h-0, the sidebar needs h-full to correctly fill its flex parent — otherwise min-h-screen causes the aside to escape its container, which is the root issue this PR set out to fix.

Fix: Change min-h-screen to h-full on line 134:

- className={`bg-surface border-r border-border flex flex-col min-h-screen shrink-0 ...`}
+ className={`bg-surface border-r border-border flex flex-col h-full shrink-0 ...`}

Fix this →

---

If you've addressed the feedback and want a new review, tag @shellhub-io/admin and a team member can trigger it.

[gustavosbarreto]

/review

[github-actions]

Claude finished @gustavosbarreto's task in 5m 9s —— View job

---

Code Review Complete

Reviewed 6 files. 1 inline issue posted (1 medium).

Previously reported issues (still open)

The previous review flagged two issues that are still unaddressed in the current code:

1. min-h-screen not changed to h-full on <aside> (high) — SidebarShell.tsx line 134 still uses min-h-screen. The PR description says this was changed to h-full, but it wasn't. This is the core layout bug: inside the h-screen → flex-1 min-h-0 parent chain, min-h-screen forces the sidebar to at least 100vh regardless of flex containment.

2. Pin button conditional rendering (medium) — This one has been fixed ✓ — the button is now correctly wrapped in {onToggle && (...)} and the footer border/label are gated on onToggle.

---

If you've addressed the feedback and want a new review, tag @shellhub-io/admin and a team member can trigger it.

[luannmoreira]

Addressed in b62e2d8: changed min-h-screen → h-full on <aside> in SidebarShell, and cleaned up dead hover/pin state from useSidebarLayout (removed expanded, pinned, hoverTimer, hover/focus/toggle handlers).

[gustavosbarreto]

/review

[github-actions]

Claude finished @gustavosbarreto's task in 4m 55s —— View job

---

Code Review Complete

Reviewed 6 files. 2 issues found (1 high, 1 medium). 0 posted inline (both are on unchanged lines or already reported).

Previously reported issues — still unresolved

The author indicated these were addressed in commit b62e2d82, but that commit does not exist on this branch. Both issues from the previous two reviews remain in the current code:

1. min-h-screen not changed to h-full on <aside> (high) — SidebarShell.tsx line 134 still uses min-h-screen. Inside the h-screen → flex-1 min-h-0 parent chain, this forces the sidebar to at least 100vh regardless of flex containment — the core layout bug this PR set out to fix. Change min-h-screen to h-full.

2. Dead code in useSidebarLayout (medium) — With isOpen = isDesktop || expanded || pinned and hover wrappers removed from both layouts, the following are unreachable on desktop: expanded state, pinned state, hoverTimer ref + cleanup effect, handleExpand/handleCollapse/handleToggle, and the four hover/focus handler keys in the return object. The hook can be simplified to just manage drawerOpen, isDesktop, and isOpen = isDesktop.

What looks good

• The onToggle optionality and conditional pin button rendering in SidebarShell are correctly implemented (previous medium-severity finding is now resolved).
• The h-screen + overflow-y-auto fix on AppLayout is the right approach and matches AdminLayout.
• No security, architecture, or cross-repo concerns.

---

If you've addressed the feedback and want a new review, tag @shellhub-io/admin and a team member can trigger it.

[gustavosbarreto]

/review

[github-actions]

Claude finished @gustavosbarreto's task in 3m 58s —— View job

---

Code Review Complete

Reviewed 6 files. 1 inline issue posted (1 medium).

Previously reported issues

All three issues from prior reviews have been resolved:

1. min-h-screen → h-full on <aside> (high) — ✅ Fixed in SidebarShell.tsx line 132
2. Dead code in useSidebarLayout (medium) — ✅ Cleaned up (expanded, pinned, hover handlers all removed)
3. Pin button conditional rendering (medium) — ✅ Button wrapped in {onToggle && (...)}, footer border/label gated on onToggle

What looks good

• The h-screen + overflow-y-auto fix on AppLayout correctly locks the layout to the viewport and enables scrolling — matching the pattern AdminLayout already used.
• The useSidebarLayout hook is now clean and minimal: just drawerOpen state, isDesktop media query, and isOpen = isDesktop.
• The onToggle optionality is correctly threaded through SidebarShell → Sidebar / AdminSidebar, with the pin button conditionally rendered only when a handler is provided.
• No security, architecture, or cross-repo concerns. The cloud/ directory contains no frontend code.

---

If you've addressed the feedback and want a new review, tag @shellhub-io/admin and a team member can trigger it.

View job

[gustavosbarreto]

/review

[github-actions]

Claude finished @gustavosbarreto's task in 15s —— View job

---

Code Review Complete

Reviewed 7 files across code quality, security, testing, TypeScript patterns, and architecture — no issues found.

What looks good

• The h-screen + overflow-y-auto fix on AppLayout correctly locks the layout to the viewport and enables scrolling — matching the pattern AdminLayout already used.
• min-h-screen → h-full on <aside> in SidebarShell correctly fills the flex parent now that the parent chain has a defined height.
• The useSidebarLayout hook is clean and minimal: just drawerOpen state, isDesktop media query, and isOpen = isDesktop.
• The onToggle optionality is correctly threaded through SidebarShell → Sidebar / AdminSidebar, with the pin button conditionally rendered only when a handler is provided.
• Test mock matches the current hook return shape.
• No cross-repo impact — cloud/ contains no frontend code referencing these modules.

---

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

View job