Switch to one column at medium width instead of small on individual page

[ekdahl]

I think it gets a bit "crowdy" with two columns on such thin widths. This change alters the threshold for when to switch between one and two columns.

Smallest width with two columns before change:

Smallest width with two columns after change:

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 35.47%. Comparing base (a0e5fa6) to head (198c75d).

Additional details and impacted files

@@            Coverage Diff            @@
##               main    #5184   +/-   ##
=========================================
  Coverage     35.47%   35.47%           
  Complexity    11183    11183           
=========================================
  Files          1159     1159           
  Lines         47918    47918           
=========================================
  Hits          16997    16997           
  Misses        30921    30921           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[fisharebest]

What devices are you using for this?

On my (Android) mobile phone, I see one column in both portrait and landscape mode.

I don't have a tablet, but I guess two column layout would start there.

[ekdahl]

This is not happening on my phone. On my desktop I have an ultrawide monitor on which I usually arrange three different windows next to each other (webtrees, church book, etc.). This "glitch" becomes noticeable when adjusting the width of the webtrees window, that the columns doesn't really fit when it switches to two columns at the 576 pixels width breakpoint.

576 px width (sm):