Fill the Canvas pane with its Markdown editor by jameskraus · Pull Request #1304 · block/buzz-app

jameskraus · 2026-10-17T20:33:53Z

The Canvas editor has a fixed 16-row height, so a tall side pane leaves empty space between the editor and the footer. This PR makes the Edit tab a column whose Markdown editor grows down to the footer.

Before	After

The captures predate the Canvas View tab; the Edit layout they show is unchanged.

Behavior

On the Edit tab, the editor fills the pane down to the footer, keeping the shared panel inset.
When the pane is shorter than the editor's 16 rows, the editor keeps that height and the pane scrolls.
The editor has no resize grip, because an editor that fills the pane can't be dragged smaller.
View and History are unchanged.

Changes

channels/Canvas.module.css. The scroll body, the outer stack and the Edit tab panel are flex columns. The editor grows (flex: 1 0 auto) and has resize: none. The Edit panel sets display: none when hidden, because its display: flex would otherwise override the hidden attribute.
channels/CanvasEditor.tsx. These two containers use the Canvas classes instead of the shared ChannelTemplates stack, and the Edit panel loses its inner wrapper div.
.views is removed. It pinned the old grid's track to the pane width so a long code line scrolls inside its block. The flex column's children already stretch to the pane width, so the rule has nothing to act on.

Design

Shared owners used: Textarea (code variant), panel Tabs, and the existing Canvas panel and footer. No shared component or token changes.
Gap: the shared Textarea has no fill mode, and the design guide's Textarea recipe includes manual vertical resizing. Canvas removes the grip in its own CSS, because a filling editor can't be resized. If other surfaces need an editor that fills its space, a Textarea fill option belongs in the design system.

Tests

Browser. channel-tabs.spec.mjs › Canvas opens once beside Thread and retains its channel draft gains one assertion: the editor ends at the footer's 20px inset. Layout needs a real browser. No browser cases are added or removed.
Long code lines. The existing markdown-documents.spec.mjs case that renders the real Canvas editor with an unwrappable code line still passes, which covers the .views removal. That case runs in Chromium only.
Vitest. The Canvas editor tests pass unchanged.

Stack

Stacked on intro copy, below draft preview and unsaved status. Combined-stack results are recorded in #1453.

Tried by the author in the native macOS app at the head of #1453.

buzz-review-completed

wesbillman

🤖 Star Lord automated source review via Wes’s account, integrating independent Rocket (systems/lifecycle), Mantis (correctness/security/concurrency) and Groot (product/accessibility) reviews.

No actionable defects found in this incremental editor-fill change. Source-review assessment: 9/10 for minimalness, elegance and correctness.

Reviewed head 4e21a49d4d4410f81f646a3ea33ecf3f36f10439 against base 726d62246813d532345dd9be54d64371d90ebf8e. Checked the complete three-file diff, shared Textarea/Tabs and panel integration, short-pane overflow, hidden Edit/History handling, draft retention, and success/error/retry/cancel focus paths. The existing browser journey gains a layout assertion without adding cases. The unchanged underlying Canvas feature was not exhaustively re-audited.

Optional documentation alignment: src/bundled/canvas/Canvas.module.css:29 intentionally removes the resize grip, as the PR describes. Consider recording this Canvas-specific fill-mode exception in src/shared/design-system/DESIGN.md, whose Form composition section still specifies manual vertical resizing and a visible grip. This is not a request to restore the grip or block the change.

Public description, commit messages and all three attached screenshots inspected; no disclosure finding on those surfaces.

Validation limits: source inspection only; no tests, builds, app launches or PR code executed. CI was not assessed in this review. Rendered keyboard/focus behavior, both browser engines, narrow/short panes, enlarged text, native desktop/live-relay behavior, performance and human acceptance remain unverified by this review. The PR’s reported QA is author-provided evidence, not a run performed here. This COMMENT is not approval or merge authorization.

wesbillman

🤖 Carl, an automated reviewer, commenting via Wes's GitHub account.

Reviewed head 4e21a49d4 against base 726d62246. No findings. I checked:

The resize override. Canvas.module.css is unlayered, so resize: none beats .buzz-textarea's resize: vertical in @layer components.
Hidden panels. .edit[hidden] is needed and correctly specific, and the History panel keeps the UA hidden behavior.
The grid-to-flex swap. Replacing grid .stack with a flex column keeps the same --space-4 gap, and cross-axis stretch still bounds width.
Short panes. flex: 1 0 auto keeps the 16-row minimum, so they scroll as described.

The new 16px footer-inset assertion is a real layout check that belongs in a browser test. The earlier optional DESIGN.md note about the fill-mode exception still stands.

Non-blocking: the description says "Readiness: Draft", but the PR is marked ready. Align one or the other per the repo's PR checklist. Merge depends on #570 (see that review). This COMMENT is not an approval.

wesbillman

🤖 Star Lord automated source review via Wes’s account, integrating independent Rocket (systems/lifecycle), Mantis (correctness/security/concurrency), and Groot (product/accessibility) reviews.

No actionable findings in the restacked editor-fill change. Source-review assessment: 9/10 for minimalness, elegance and correctness.

Reviewed head 87dac25 against base 5a7b41b. Checked the complete three-file diff and current Canvas integration: bounded pane scrolling, hidden Edit/History handling, shared Textarea and Tabs, draft retention, async guards, and success/error/retry/cancel focus paths. The existing browser journey adds a layout assertion without adding cases. This is an integration review of this PR, not an exhaustive audit of the 255-file upstream endpoint difference since the previously reviewed revision.

The prior optional documentation note about the intentional Canvas fill-mode exception to the shared resize-grip recipe remains unchanged; it is not a request to restore the grip. Public description, this PR’s commit metadata and all three attached screenshots were inspected with no disclosure finding.

Validation limits: source inspection only; no tests, builds, app launches or PR code executed, and CI was not assessed. Browser/native layout, short-pane and error-state visibility, rendered keyboard/focus behavior, enlarged text, performance, live-relay behavior and human acceptance remain unverified by this review. Author-reported QA was not rerun. This COMMENT is not approval or merge authorization.

jameskraus · 2026-10-21T20:32:27Z

🤖 Codex: Addressed the description/readiness mismatch. The description no longer calls this PR draft; its existing ready state is preserved. Before/after screenshots were recaptured from the current base 5a7b41bf2e and head 87dac25831. The optional design-guide note about the resize-grip exception is still deferred.

wesbillman

🤖 No changes requested in this Canvas fill restack. Star Lord’s automated source review via Wes’s account, integrating Rocket, Mantis and Groot, found the current panel inset and retained draft/recovery behavior consistent with the change; the prior optional documentation note remains unchanged.

Reviewed head 0b1f7e8f7037a9eab431ac5c1e939e3a910b0fc1 against base d984207aeeb6b70beeb37bab67181685d5b38069, including the three-file patch, affected integration and three attached screenshots. Source-only: no tests or app execution, CI not assessed; rendered short-pane/enlarged-text/error layouts and native/live-relay behavior remain unverified by this review.

wesbillman

🤖 Carl, an automated reviewer, commenting via Wes's GitHub account.

Reviewed head 1cc9eff68 against base 3fdbfb6dd. No findings in the diff. However, this PR now conflicts with main in CanvasEditor.tsx. #3319 changed the same wrapper to ${styles.stack} ${panelStyles.views}, and .views sets grid-template-columns: minmax(0, 1fr) so that long code lines scroll inside their block.

When resolving, keep panelStyles.body alone and keep main's codeBlocks import/prop. .views does nothing on a flex container, and the stretched flex column already contains wide content. I checked that resolution on the merged stack: #3319's real-editor containment check in markdown-documents.spec.mjs passes, as do channel-tabs and canvas-history in Chromium and WebKit. .views then becomes unused in Canvas.module.css, so drop it.

The earlier optional note still stands: record the Canvas no-resize-grip exception in DESIGN.md's Textarea recipe. This COMMENT is not an approval.

wesbillman

🤖 Carl, an automated reviewer, approving via Wes's GitHub account at Wes's request. Approved at 1cc9eff68. Rebase notes from my earlier review still apply: keep panelStyles.body and drop the unused .views.

wpfleger96

🤖 Review from Will's agents (Paul and Thufir, reviewing independently, consolidated by Paul).

No behavioral findings at 1cc9eff68. The only item is the rebase onto main after #3319, which conflicts in CanvasEditor.tsx (inline). We both landed on the same resolution.

What holds: flex: 1 0 auto keeps the 16-row minimum and grows into extra height, .scroll still owns overflow in a short pane, .edit[hidden] { display: none } correctly beats the author display: flex, and the new footer-inset assertion checks the claimed layout without adding a browser case. Removing the resize grip departs from the design guide's Textarea recipe, but the CSS comment and the description already explain the Canvas-only exception, so we're not asking for more.

wpfleger96 · 2026-11-12T21:55:58Z

  const body = (
    <>
-      <div className={styles.stack}>
+      <div className={panelStyles.body}>


🤖 This line conflicts with main after #3319, which changed it to ${styles.stack} ${panelStyles.views}. Resolve it as:

Keep className={panelStyles.body}. Taking main's side drops the fill behavior.

Keep feat(markdown): share one Markdown renderer across messages and documents #3319's codeBlocks plumbing into CanvasView.

Delete the .views rule from Canvas.module.css. It only set the grid track to minmax(0, 1fr), so a long code line scrolled inside its block instead of widening the Canvas. In this column flex chain the children stretch to the pane's width, so the rule has nothing to act on.

#3319's tests/browser/markdown-documents.spec.mjs already renders the real CanvasEditor with a code line that can't wrap and asserts the panel stays at the host's width. A green run of that spec on the rebased head confirms the swap in Chromium, where that case runs, so no new assertion is needed.

wpfleger96

🤖 Approving on Will's behalf at 1cc9eff68. No behavioral findings. Resolve the conflict with main as described in the inline note.

The editor kept a fixed 16-row height, leaving the rest of a tall side pane empty above the footer. The Edit tab is now a column whose editor grows to the footer's inset. Below 16 rows it keeps that height and the pane scrolls, as before. A filling editor cannot be dragged smaller, so it has no resize grip. Co-Authored-By: Claude Opus 5.5 <[email protected]> Signed-off-by: James Kraus <[email protected]> Co-authored-by: Astra <5dfac8a5849b79887d9392ac4950275d6bd2ec0755e33e3e122baf4235b09a25@feedback.communities.buzz.xyz>

jameskraus mentioned this pull request Oct 20, 2026

Add Canvas Markdown preview and unsaved status #1453

Draft

jameskraus marked this pull request as ready for review October 21, 2026 01:09

jameskraus requested a review from a team as a code owner October 21, 2026 01:09

wesbillman reviewed Oct 21, 2026

View reviewed changes

wesbillman mentioned this pull request Oct 21, 2026

Open channel Canvas from the channel menu in a side-pane tab #570

Merged

jameskraus force-pushed the jkraus/canvas-fill-editor branch 2 times, most recently from 5e20777 to 87dac25 Compare October 21, 2026 19:36

wesbillman reviewed Oct 21, 2026

View reviewed changes

jameskraus marked this pull request as draft October 26, 2026 18:10

jameskraus force-pushed the jkraus/canvas-fill-editor branch from 87dac25 to c8bdf96 Compare October 26, 2026 18:48

jameskraus force-pushed the jkraus/canvas-fill-editor branch from c8bdf96 to 009ab76 Compare October 26, 2026 18:56

jameskraus force-pushed the jkraus/canvas-fill-editor branch from 009ab76 to 0b1f7e8 Compare October 27, 2026 18:44

jameskraus marked this pull request as ready for review October 27, 2026 22:07

wesbillman reviewed Oct 27, 2026

View reviewed changes

jameskraus added this pull request to stack #3301 November 11, 2026 20:04

jameskraus force-pushed the jkraus/canvas-fill-editor branch from 0b1f7e8 to 1cc9eff Compare November 11, 2026 20:27

jameskraus mentioned this pull request Nov 11, 2026

Drop the revision-check sentence from the Canvas intro #1303

Open

jameskraus marked this pull request as draft November 11, 2026 20:27

jameskraus marked this pull request as ready for review November 11, 2026 21:00

wesbillman reviewed Nov 12, 2026

View reviewed changes

wesbillman approved these changes Nov 12, 2026

View reviewed changes

wpfleger96 reviewed Nov 12, 2026

View reviewed changes

wpfleger96 approved these changes Nov 12, 2026

View reviewed changes

jameskraus force-pushed the jkraus/canvas-fill-editor branch from 1cc9eff to 731c596 Compare November 13, 2026 01:46

Navigation Menu

Repository navigation

Fill the Canvas pane with its Markdown editor - #1304

Fill the Canvas pane with its Markdown editor#1304
jameskraus wants to merge 1 commit into
jkraus/canvas-intro-copyfrom
jkraus/canvas-fill-editor

jameskraus commented Oct 17, 2026 •

edited

Loading

Uh oh!

wesbillman left a comment

Uh oh!

wesbillman left a comment

Uh oh!

wesbillman left a comment

Uh oh!

jameskraus commented Oct 21, 2026

Uh oh!

wesbillman left a comment

Uh oh!

wesbillman left a comment

Uh oh!

wesbillman left a comment

Uh oh!

wpfleger96 left a comment

Uh oh!

wpfleger96 Nov 12, 2026 •

edited

Loading

Uh oh!

wpfleger96 left a comment

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

jameskraus commented Oct 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Behavior

Changes

Design

Tests

Stack

Uh oh!

wesbillman left a comment

Choose a reason for hiding this comment

Uh oh!

wesbillman left a comment

Choose a reason for hiding this comment

Uh oh!

wesbillman left a comment

Choose a reason for hiding this comment

Uh oh!

jameskraus commented Oct 21, 2026

Uh oh!

wesbillman left a comment

Choose a reason for hiding this comment

Uh oh!

wesbillman left a comment

Choose a reason for hiding this comment

Uh oh!

wesbillman left a comment

Choose a reason for hiding this comment

Uh oh!

wpfleger96 left a comment

Choose a reason for hiding this comment

Uh oh!

wpfleger96 Nov 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wpfleger96 left a comment

Choose a reason for hiding this comment

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jameskraus commented Oct 17, 2026 •

edited

Loading

wpfleger96 Nov 12, 2026 •

edited

Loading