Skip to content

fix(editor): give only section columns that show no blocks the drop-zone height - #855

Open
desheikh wants to merge 1 commit into
templatical:mainfrom
desheikh:fix/editor-section-column-min-height
Open

desheikh wants to merge 1 commit into
templatical:mainfrom
desheikh:fix/editor-section-column-min-height

Conversation

@desheikh

@desheikh desheikh commented Oct 6, 2026 •

Copy link
Copy Markdown
Contributor

Summary

Every section column has a 60px minimum height on the canvas. That's useful for an empty column (it gives you somewhere to drop a block), but a column with content keeps it too. So a short band, like a one-line footer note, looks taller in the editor than in the sent email.

This keeps the 60px only for a column that shows no blocks. A column with content is as tall as its content.

The column still keeps its 60px drop target when:

  • it's empty;
  • all its blocks are hidden by the condition preview;
  • its only block is being dragged into another column.

Linked issues

n/a

Type of change

  • Bug fix (non-breaking change that fixes an issue)

Affected packages

  • @templatical/editor

Checklist

  • Tests added or updated (and they fail without my change)
  • pnpm run ci passes locally (lint + typecheck + build + test)
  • pnpm run test:e2e passes (only if this PR touches editor UI)
  • Changeset added (pnpm exec changeset)
  • PR title is descriptive and follows the existing convention

Notes for reviewers

  • The drag case needs a CSS rule, because Sortable moves the block's element before the model changes. The rule checks for Sortable's .sortable-fallback clone and for blocks hidden with display: none. It's the least pretty part; happy to simplify (for example, a smaller floor for filled columns) if you'd rather avoid it.
  • block-chrome-structure.test.ts pins the condition-filter check as written in the template. I widened its regex to accept the same check in script form.
  • Tested by dragging in the playground, plus unit tests. Lint, typecheck and the editor suite pass locally; I haven't run pnpm run ci or e2e.

🤖 Generated with Claude Code

…one height

Every column had a 60px minimum, so a short band (a one-line strip, a
footer note) looked taller on the canvas than in the sent email.

The minimum now applies only to a column that shows no blocks, so it stays a
drop target:

- a bound class follows the model: no blocks, or all hidden by the
  condition preview. It also holds the height while a drag hovers over an
  empty column, where Sortable's placeholder is already in the list;
- a static :has rule covers a drag out, where Sortable moves the block
  away before the model changes and leaves only its .sortable-fallback
  clone and any display:none (v-show) blocks.

The v-show check moves into an isChildShown helper, so the guard in
block-chrome-structure.test.ts accepts its script form.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@desheikh
desheikh force-pushed the fix/editor-section-column-min-height branch from ad33333 to 5fe0185 Compare October 6, 2026 20:50
@desheikh desheikh changed the title fix(editor): give only empty section columns the drop-zone height fix(editor): give only section columns that show no blocks the drop-zone height Oct 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant