AppFlowy-IO/AppFlowy

Fork 0

mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2026-03-24 04:46:56 +00:00

[GH-ISSUE #1916] [Bug] Cover Image causes Overflow #752

New issue

Closed

opened 2026-03-23 20:40:38 +00:00 by mirror · 6 comments

mirror commented

2026-03-23 20:40:38 +00:00

Owner

Originally created by @AmanNegi on GitHub (Mar 3, 2023).
Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/1916

Originally assigned to: @hyj1204 on GitHub.

Bug Description

Adding an cover image in document causes an overflow.

How to Reproduce

Run the app, using the AF-desktop: Build All and create a document. Add a cover image, you will be able to see the overflow.

Expected Behavior

No Overflow, should be present.

Operating System

Ubuntu 20.04.5 LTS

AppFlowy Version(s)

1.0.0.1

Screenshots

No response

Additional Context

No response

Originally created by @AmanNegi on GitHub (Mar 3, 2023). Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/1916 Originally assigned to: @hyj1204 on GitHub. ### Bug Description Adding an cover image in document causes an overflow. ![Screenshot from 2023-03-03 18-09-48](https://user-images.githubusercontent.com/37607224/222722784-bfc29569-3132-46a8-9225-00ac83ef2b69.png) ### How to Reproduce Run the app, using the `AF-desktop: Build All` and create a document. Add a cover image, you will be able to see the overflow. ### Expected Behavior No Overflow, should be present. ### Operating System Ubuntu 20.04.5 LTS ### AppFlowy Version(s) 1.0.0.1 ### Screenshots _No response_ ### Additional Context _No response_

mirror

2026-03-23 20:40:38 +00:00

closed this issue
added the
bug
label

mirror commented

2026-03-23 20:40:39 +00:00

Author

Owner

@AmanNegi commented on GitHub (Mar 3, 2023):

It might take me some time to figure this out, but I would like to work on this.

@AmanNegi commented on GitHub (Mar 3, 2023): It might take me some time to figure this out, but I would like to work on this.

mirror commented

2026-03-23 20:40:39 +00:00

Author

Owner

@LucasXu0 commented on GitHub (Mar 6, 2023):

Hey, @AmanNegi. It's by design. I wrap the cover with UnconstrainedBox. Otherwise, the cover will not expand to the same size as the page.

@LucasXu0 commented on GitHub (Mar 6, 2023): Hey, @AmanNegi. It's by design. I wrap the cover with [UnconstrainedBox](https://api.flutter.dev/flutter/widgets/UnconstrainedBox-class.html). Otherwise, the cover will not expand to the same size as the page.

mirror commented

2026-03-23 20:40:39 +00:00

Author

Owner

@annieappflowy commented on GitHub (Mar 9, 2023):

@AmanNegi , is this resolved? Maybe a new thread for the design feedback?

@annieappflowy commented on GitHub (Mar 9, 2023): @AmanNegi , is this resolved? Maybe a new thread for the design feedback?

mirror commented

2026-03-23 20:40:39 +00:00

Author

Owner

@hyj1204 commented on GitHub (Mar 9, 2023):

Hi, @LucasXu0
I noticed the cover image width is set to screenSize.width. I tried to remove the UnconstrainedBox and the overflow is gone. I think the width of cover image will keep the same size as screenSize.width, so it can expand as the screen size changes. I tested only on the macOS so far, please let me know if you have any thoughts about it.

@hyj1204 commented on GitHub (Mar 9, 2023): Hi, @LucasXu0 I noticed the cover image width is set to `screenSize.width`. I tried to remove the `UnconstrainedBox` and the overflow is gone. I think the width of cover image will keep the same size as `screenSize.width`, so it can expand as the screen size changes. I tested only on the macOS so far, please let me know if you have any thoughts about it.

mirror commented

2026-03-23 20:40:40 +00:00

Author

Owner

@hyj1204 commented on GitHub (Mar 9, 2023):

Hi @LucasXu0,
I noticed that cover image will have the padding from editorStyle.padding,but the design actually has no padding on the cover image. I am thinking maybe we can delete editorStyle.padding under _buildServices, then add padding in every node widget builder? so user can setting the padding for every node? I am not sure if it is a good idea. I feel in most cases, user may just want to setting a certain padding for all the nodes except the cover image(part). What do you think？

@hyj1204 commented on GitHub (Mar 9, 2023): Hi @LucasXu0, I noticed that cover image will have the padding from `editorStyle.padding`,but the design actually has no padding on the cover image. I am thinking maybe we can delete `editorStyle.padding` under `_buildServices`, then add padding in every node widget builder? so user can setting the padding for every node? I am not sure if it is a good idea. I feel in most cases, user may just want to setting a certain padding for all the nodes except the cover image(part). What do you think？

mirror commented

2026-03-23 20:40:40 +00:00

Author

Owner

@LucasXu0 commented on GitHub (Mar 10, 2023):

Hey, @hyj1204. If we delete the padding under _buildServices, we have to customize all the nodes with padding manually. Because the style of the cover image is different from the other component. I used
UnconstrainedBox intentionally. I think the better solution is to disable the overflow indicator.

https://github.com/flutter/flutter/issues/77355

@LucasXu0 commented on GitHub (Mar 10, 2023): Hey, @hyj1204. If we delete the padding under _buildServices, we have to customize all the nodes with padding manually. Because the style of the cover image is different from the other component. I used [UnconstrainedBox](https://api.flutter.dev/flutter/widgets/UnconstrainedBox-class.html) intentionally. I think the better solution is to disable the overflow indicator. https://github.com/flutter/flutter/issues/77355

mirror referenced this issue

2026-03-23 21:37:16 +00:00

[PR #752] [MERGED] feat: implement toolbar UI part. #4316