Container should be responsive when window width is small

What Do You Recommend?

Reduce margins (gradually ?) when the viewport is small.

How Could It Be Done?

It is possible to change the margin size in the layout parameters, but it should be overridden when window size is too small

Image or Video

Real World Use-Cases

I often split my screen on my laptop between two windows : AnyType and something else (a web page, an online meeting). Screen real-estate is pretty important at this point.

Additional Context

Maybe gray out the “Set layout width” in the layout parameter when width is small and explain this to the user.
I collapse the sidebar manually but another enhancement could be for it to unpin when window size is too small.

I still believe that this is a valid FR but I managed to do it using custom CSS.

@media (max-width: 960px) {
  .editorWrapper {
    width: calc(100vw - 64px) !important;
  }
  
  .isPopup .editorWrapper {
    width: calc(100vw - 128px) !important;
  }
}

See here: Tutorial of custom css - #3 by Kerstie

2 Likes

The CSS post was by @LavaC. :grinning:

I agree with FR, the body is just too narrow while on ‘split screen’.

2 Likes

That works fantastically as a workaround. This should become standard CSS of Anytype.