From 9cf98d93450e304e999dc6d3acf6121cca64c403 Mon Sep 17 00:00:00 2001
From: chauhan_s <somaychauhan98@gmail.com>
Date: Thu, 26 Mar 2026 23:48:55 +0530
Subject: [PATCH] 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 -->
---
 .../frontend/core/src/components/page-detail-editor.css.ts    | 2 ++
 .../desktop/pages/workspace/detail-page/detail-page.css.ts    | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/packages/frontend/core/src/components/page-detail-editor.css.ts b/packages/frontend/core/src/components/page-detail-editor.css.ts
index 567cca65c3..f1a8c34d17 100644
--- a/packages/frontend/core/src/components/page-detail-editor.css.ts
+++ b/packages/frontend/core/src/components/page-detail-editor.css.ts
@@ -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',
diff --git a/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.css.ts b/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.css.ts
index 7580853075..1ec1b882a4 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.css.ts
+++ b/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.css.ts
@@ -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%' }