improvement: include mo.sidebar() when using Grid layout

[mscolnick]

Fixes #6361

The sidebar will always be rendered in read mode (even if not included in the grid).

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
marimo-docs	Ready	Preview	Comment	Nov 25, 2025 6:11pm

[Copilot]

Pull request overview

This PR fixes issue #6361 by ensuring that mo.sidebar() is rendered in read mode even when using grid layout and the sidebar cell is not included in the grid. The fix implements a mechanism to detect sidebar cells that are not in the grid and renders them in a hidden div, allowing the sidebar portal system to function correctly.

Key Changes

• Added logic to filter and render sidebar cells in a hidden div when in read mode
• Implemented isSidebarCell() helper function to detect cells containing sidebar content
• Added comprehensive e2e tests to verify sidebar functionality in both run and edit modes with grid layout

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
frontend/src/components/editor/renderers/grid-layout/grid-layout.tsx	Added sidebar cell detection and rendering logic for cells not in grid during read mode
frontend/playwright.config.ts	Added test configurations for the new sidebar grid layout test in both edit and run modes
frontend/e2e-tests/py/layouts/layout_grid_with_sidebar.grid.json	Grid layout configuration with 3 cells positioned and 2 cells (including sidebar) not in grid
frontend/e2e-tests/py/layout_grid_with_sidebar.py	Test notebook with grid layout and sidebar content
frontend/e2e-tests/layout-grid-with-sidebar.spec.ts	E2E tests verifying sidebar renders correctly in both run and edit preview modes

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

[nitpick] The comment could be clearer. The phrase "even if they are not in grid (hidden)" might be misunderstood. Consider rewording to be more explicit about why these cells are being rendered:

{/* Render sidebar cells in hidden div so they can register with the sidebar portal */}

This makes it clear that the cells need to be rendered (not skipped) for the sidebar functionality to work, and that the hidden div is intentional.

Suggested change

	{/* Render sidebar outputs even if they are not in grid (hidden) */}
	{/* Render sidebar cells in hidden div so they can register with the sidebar portal */}

[Copilot]

[nitpick] The isSidebarCell function could produce false positives if the output data is a string but not HTML (e.g., text/plain or JSON stringified) that happens to contain "marimo-sidebar". Consider adding a check for cell.output.mimetype === "text/html" to make the detection more robust.

function isSidebarCell(cell: CellRuntimeState) {
  return (
    cell.output?.mimetype === "text/html" &&
    typeof cell.output?.data === "string" &&
    cell.output.data.includes("marimo-sidebar")
  );
}

While false-positives are acceptable here (as noted in the comment), checking the mimetype would prevent unnecessary rendering of non-sidebar cells in the hidden div.

[Copilot]

This sidebar rendering logic will not execute in "present" mode (when preview is enabled in edit mode), but it should. The isReading variable at line 61 is defined as mode === "read", which doesn't include "present" mode.

The test at layout-grid-with-sidebar.spec.ts:44-70 expects the sidebar to work when the preview button is clicked in edit mode, which sets the mode to "present". Without fixing the isReading check, this test will fail.

To fix this, update line 61 (outside this diff) to:

const isReading = mode === "read" || mode === "present";