mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-02 02:00:49 +08:00
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:
@@ -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%' }
|
||||
|
||||
Reference in New Issue
Block a user