Skip to content

Fix missing drop-indicator styling for in-column block drag reordering #294

Description

@brylie

Dragging a block to reorder it within (or into) a column shows no visible drop-indicator line during the drag — the reorder itself still works (it's driven by component state, not CSS), but the drag feedback silently disappears, unlike the polished accent-colored indicator the Document's top-level flow shows for the same interaction.

The root cause is a Svelte scoped-CSS mismatch: .drop-indicator's only style definition lives in src/routes/space/[spaceId]/doc/[id]/+page.svelte's own <style> block. Svelte's automatic style scoping stamps a per-component hash class onto both that rule and every element +page.svelte's own template renders — but src/lib/components/ColumnsBlock.svelte renders its own <div class="drop-indicator"> at two spots (between column blocks, and after the last one) from a different component with no <style> block of its own, so the compiled .drop-indicator.svelte-xxxxx selector never matches those elements.

This predates #239 (present since #148 introduced ColumnsBlock.svelte) and was noticed but deliberately left unchanged while extracting BlockRow.svelte in #239, since that PR's scope excluded drop-indicator rendering and any behavior change.

  • .drop-indicator renders visibly wherever it's used inside a column — either promote the rule to :global(.drop-indicator) in ColumnsBlock.svelte, or duplicate the rule in a <style> block there.
  • Manually verify (or add a rendered-style assertion) that dragging a block within a column, and into an adjacent column, shows the same accent-colored line as the top-level flow.

Done when: dragging a block to reorder it inside a column, or across columns, shows the drop-indicator line at the correct position, matching the top-level Document flow's existing behavior.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions