search

anyproto / anytype-ts

Official Anytype client for MacOS, Linux, and Windows
https://anytype.io
Other
4.21k stars 255 forks source link

Responsive layout width #552

Open sjmgarnier opened 8 months ago

sjmgarnier commented 8 months ago

Have you read a contributing guide?

Clear and concise description of the problem

At the moment, the layout width is a fixed percentage of the full page width. As a result, viewing the desktop app on screens with different widths or simply changing the width of the app window (e.g., when tiling it with another app) can lead to very different visual experiences (e.g., side-by-side preview cards will appear squished if the window width is small, and overly elongated on if it is wide).

Suggested solution

Most of this could be resolved by allowing the blank margins on each side of the page to dynamically adjust the proportion of the page they occupy as a function of the screen width. For example, for wide window widths, they could be set to occupy up to 20% on each side of the page, but for smaller window widths, this maximum percentage could be reduced to 10% or even 5% (or whatever is most pleasing for the user). This would provide a more consistent look to the pages when switching between small and large screens, or when resizing the app window.

Alternative

No response

Additional context

No response

yasyuk commented 8 months ago

The container for regular objects (not collections and sets) was chosen to be the optimal width for text readability. Stretching the content container to a larger width degrades readability. Imagine a very wide display where the text takes up the entire width.

This is why news sites (like news feeds) also use fixed containers. For example, look at medium.com or bloomberg.com.

sjmgarnier commented 8 months ago

@yasyuk Right now, the container width is not fixed. It changes with the window width.

sjmgarnier commented 8 months ago

@yasyuk See examples below. The main container on the Bloomberg website indeed doesn't change width when the window width is halved, but it's not the case for Anytype.

Screenshot 2024-02-06 at 11 50 07 AM Screenshot 2024-02-06 at 11 51 04 AM
yasyuk commented 8 months ago

It appears to have changed. Column widths used to have a fixed maximum width. I'll check and create a task to fix it. Thanks for noticing!

yasyuk commented 7 months ago

I have an update on this topic. We discussed that the current scheme was also requested by users. Therefore, changing it now may result in negative feedback.

However, I personally understand your point of view and agree with you. It seems that this should be a customization in Object Layout. We have a plan to update it significantly. We will add a customization fix/responsive layout when we redesign it.

sjmgarnier commented 7 months ago

@yasyuk Both types of layouts make sense for different types of situations. If it is possible to offer a choice to the users, then that would make everyone happy I think.