fix: restore kanban scroll in fullscreen mode (#14708)

fixes #14679

This fixes a layout issue where Kanban boards stopped horizontally
scrolling in fullscreen/full-width page mode.

https://github.com/user-attachments/assets/375fb8f7-3652-4207-8f9c-ee4cdae881ad


The root cause was not in the Kanban view itself, but in the page-mode
viewport wrapper. In fullscreen mode, the editor expands to full width,
and the existing display: table wrapper caused the outer editor
container to size from Kanban content instead of the viewport. That
prevented the Kanban scroller from owning horizontal overflow correctly.

### What changed
Keep the fullscreen editor wrapper constrained to the viewport width
Override the page-mode viewport content wrapper from display: table to
display: block only when a fullscreen editor is present
Leave the default/non-fullscreen layout behavior unchanged
### Why this works
With the outer fullscreen wrapper locked to viewport width, horizontal
overflow stays inside the Kanban view, so its existing overflow-x:
scroll behavior works again.



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Improved full-screen editor layout rendering to ensure proper width
and display constraints are applied correctly in full-screen mode.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
chauhan_s
2026-03-26 23:48:55 +05:30
committed by GitHub
parent a617da99e2
commit 9cf98d9345
2 changed files with 6 additions and 0 deletions
@@ -3,6 +3,8 @@ export const editor = style({
flex: 1,
selectors: {
'&.full-screen': {
width: '100%',
minWidth: 0,
vars: {
'--affine-editor-width': '100%',
'--affine-editor-side-padding': '72px',
@@ -52,6 +52,10 @@ globalStyle(
`${pageModeViewportContentBox} >:first-child:has(>[data-affine-editor-container])`,
{ display: 'table !important', minWidth: '100%' }
);
globalStyle(
`${pageModeViewportContentBox} >:first-child:has(>[data-affine-editor-container].full-screen)`,
{ display: 'block !important', width: '100%', minWidth: '100%' }
);
globalStyle(
`${pageModeViewportContentBox} >:first-child:has(>[data-editor-loading="true"]) > [data-editor-loading="true"]`,
{ flex: 1, minHeight: '100%' }