Should the front-end dashboard use max-width?

[jeroen]

Currently the r-universe dashboards use fluid-width, which might look weird on very large screens. Some people suggest we switch to a fixed max-width.

What makes this challenging is that the content of different universes varies a lot. A fixed width will apply across all packages and tabs, so we should try it with different packages and universes to make sure it is sufficiently wide for a variety of content.

Both are possible. Some examples:

• https://github.com (fluid width)
• https://github.com/ropensci (fixed width: 1280px)
• https://getbootstrap.com/docs/5.3/examples/grid/ (bootstrap container: 1320px)
• https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories (fixed: 1440px).

I added a feature to experiment with fixed max-width. If you got to a universe homepage and press w on your keyboard you can enter a value to test how it looks with a given max-width.

Some random pages to test :

• https://ropensci.r-universe.dev/packages
• https://ropensci.r-universe.dev/builds
• https://ropensci.r-universe.dev/articles
• https://ropensci.r-universe.dev/api
• https://ropensci.r-universe.dev/targets
• https://ropensci.r-universe.dev/magick
• https://ropensci.r-universe.dev/excluder
• https://tidyverse.r-universe.dev/ggplot2
• https://tidyverse.r-universe.dev/articles/ggplot2/ggplot2.html
• https://ropensci.r-universe.dev/articles/magick/intro.html

Try a few values and suggest what you think looks nice.

[eddelbuettel]

From your toot I opened the page on a not-full-width window and then added 900. I liked that. In full width a higher value is probably better.

But can't you take a page from bootstrap etc and do something like '90% width as longer as device width is larger than x' with a common cutoff these frameworks use between mobile, tablet, browser?

Good UI design is hard.

[Aariq]

The builds, articles, and api pages look fine at any width, IMO, including the smallest. packages/ looks weird at anything < 1500 to me. An individual package page looks bad at less than 1200 because the side bar gets squished to the bottom, but any size ≥ 1200 looks ok. Vignettes are fine at any size, but I think 1200 or 1400 look best.

[jeroen]

Decided to go with 1440 for the new front-end. This is the default resolution for the smallest (13-inch) macbook air M1, and also the width used by mozilla: https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories

[jeroen]

Deployed part of the new front-end for universe pages and individual package homepages, for example:

• https://jeroen.r-universe.dev
• https://jeroen.r-universe.dev/jsonlite