improve: make "Content Layout Max Width" linked to " Page Layout Max Width"

[Ampernic]

Every user can set content layout width larger than page layout:

Maybe need to calculate content layout using set page width?

[nekomeowww]

@Ampernic This is indeed blocking users to have a more straightforward way to understand how adjustment slider works when using enhanced readabilities plugin.

Short answer: It is possible to calculate.
Long answer: It is not quite easy to design how to "link" these two values together.

Pre-requirements knowledge:

1. VitePress's default theme offers several breakpoints (4 in total) for different screen sizes. By design of enhanced readabilities plugin, layout switch will only work at breakpoint 4 (largest one).
2. Default theme is maintained by VitePress and we cannot actually manipulate it easily.

Method 1

Let's say the "linking" method is to dynamically calculate and measure how wide the sidebars and viewport are, then calculate the available percentage of viewport for contents to scale.

Or we can write equations like this:

max value of Content Layout Max Width slider = (Viewport width - Sidebar width - Aside (Outline) width) / Viewport width

Then there are things to consider now:

1. Would querySelector and getClientRect capable enough to get the sidebar and outline width?
2. What if someone modified or override the Sidebar and Aside components?
3. What other scenarioes do we need to consider?
4. We have the max value now, how can we calculate the min value for slider?

In conclusion, method 1 is hard to maintain and cover the edge cases well enough to calculate the sizes of components, but offers users better flexibilities since they would have abilities to adjust it as much accurate as possible.

Method 2

Instead of full slider, can we make several presets that were tested carefully to prevent users to misconfigure it, but in a more controllable way. The sliders may remain as the same, but we can add one extra options to allow users to choose a preset from, the presets are another slider to take the Content and Sidebar width slider's place. Easy to setup and get it running.

If you'd like to prevent users to misplay the sliders completely, we can also add one extra option to drop out or hide options for users to choose from.

What do you think?

[Ampernic]

Thanks for fast response
After a little discussion with the team, we agreed that the second option sounds better.