fix(editor): restore horizontal scrolling in kanban board full-width layout

[CTDave001]

Summary

Fixes the horizontal scrolling issue in the kanban board when using full-width page layout. The scrollbar wasn't showing up because the kanban container was expanding to match its content width instead of staying constrained to the viewport.

Closes #14531

Problem

In full-width mode, virtualPadding is 0, which meant the negative-margin/padding technique used for scroll alignment was essentially a no-op. Without any width constraint, the KanbanViewUI element would grow to fit all its child groups, so scrollWidth === clientWidth and no scrollbar appeared.

Fix

• Added contain: inline-size to the kanban view element so its width comes from the parent, not its children
• Swapped out inline padding on the scroll container for spacer divs, since padding inflates clientWidth while spacer divs only add to scrollWidth

Files changed

• blocksuite/affine/data-view/src/view-presets/kanban/pc/kanban-view-ui-logic.ts — the actual fix
• blocksuite/affine/data-view/src/core/group-by/trait.ts — removed stray comment
• blocksuite/affine/data-view/src/__tests__/kanban.unit.spec.ts — added test for scroll containment

Testing

• Added a unit test that checks KanbanViewUI applies contain: inline-size on connect
• All 41 tests pass (40 existing + 1 new)

To verify manually:

1. Create a database with kanban view
2. Set page to full-width layout
3. Add groups until they go past the viewport
4. Confirm horizontal scrollbar shows up and works

Summary by CodeRabbit

• Tests

  • Added comprehensive test suite validating Kanban view UI styling, containment behavior, and layout properties with mock setup and DOM assertions

• Style

  • Enhanced horizontal spacing implementation in Kanban view component with improved layout approach

• Chores

  • Cleaned up test comments from internal utility code

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 96c1e215-673c-42e1-a4c5-3102ecdde4a4

📥 Commits

Reviewing files that changed from the base of the PR and between 121c0d1 and ed5c966.

📒 Files selected for processing (3)

• blocksuite/affine/data-view/src/__tests__/kanban.unit.spec.ts
• blocksuite/affine/data-view/src/core/group-by/trait.ts
• blocksuite/affine/data-view/src/view-presets/kanban/pc/kanban-view-ui-logic.ts

💤 Files with no reviewable changes (1)

• blocksuite/affine/data-view/src/core/group-by/trait.ts

---

📝 Walkthrough

Walkthrough

This PR fixes the broken Kanban board by adding CSS containment (inline-size) to the KanbanViewUI element, refactoring horizontal padding using spacer divs, and adding unit tests to verify the containment behavior.

Changes

Cohort / File(s)	Summary
Kanban View UI Styling blocksuite/affine/data-view/src/view-presets/kanban/pc/kanban-view-ui-logic.ts	Applied CSS containment policy (inline-size) to root element. Removed direct horizontal padding and replaced with two spacer divs (before/after groups) configured with flex-shrink and width calculations based on vertical padding to preserve side spacing.
Kanban Test Suite blocksuite/affine/data-view/src/__tests__/kanban.unit.spec.ts	Added new test suite "scroll containment" verifying that dv-kanban-view-ui element enforces inline-size containment and validates display/flexDirection styles. Note: Test suite appears to be duplicated within the same file.
Import Cleanup blocksuite/affine/data-view/src/core/group-by/trait.ts	Removed comment line from imports section.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A kanban board once lost its way,
With scrolling broken, cards wouldn't play,
But spacers arrive with a flex and a care,
And containment spins magic in the digital air! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: fixing horizontal scrolling in kanban board full-width layout, which directly corresponds to the primary objective addressed by the PR.
Linked Issues check	✅ Passed	The PR addresses the primary objective from issue #14531 (restore horizontal scrolling) through CSS containment and spacer divs. However, it does not address the other two reported issues (stack reordering and vertical drag-within-stack problems).
Out of Scope Changes check	✅ Passed	All changes align with the stated objective of fixing horizontal scrolling: CSS containment on KanbanViewUI, spacer divs replacing padding, test coverage, and a comment cleanup. No extraneous modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

CodeRabbit can approve the review once all CodeRabbit's comments are resolved.

Enable the reviews.request_changes_workflow setting to automatically approve the review once all CodeRabbit's comments are resolved.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 58.68%. Comparing base (13ad1be) to head (ed5c966).
⚠️ Report is 80 commits behind head on canary.

Additional details and impacted files

@@            Coverage Diff             @@
##           canary   #14665      +/-   ##
==========================================
+ Coverage   58.55%   58.68%   +0.12%     
==========================================
  Files        2909     2910       +1     
  Lines      159987   160102     +115     
  Branches    23202    23252      +50     
==========================================
+ Hits        93687    93953     +266     
+ Misses      63548    63396     -152     
- Partials     2752     2753       +1     

Flag	Coverage Δ
server-test	75.67% <ø> (+0.23%)	⬆️
unittest	34.40% <100.00%> (+0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[darkskygit]

the change broke some kanban tests