Adjust wiki layout for users with fluid layout preference

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

Problem

Users with the fluid layout preference experience reduced readability when viewing wiki pages on wide screens. Long lines of text become difficult to read as they stretch across the entire viewport width. While optimal text readability occurs at approximately 720px line width, wiki content currently has no width constraints for fluid layouts.

Proposal

Introduce a maximum width constraint of 992px for text blocks in wiki pages when users have selected the fluid layout preference. This provides a balance between screen utilization and text readability.

The 992px value corresponds to our 'lg' breakpoint as defined in tailwind.config.js.

Implementation approach

The implementation should:

  1. Apply a max-width of 992px to text block elements (paragraphs, headings, lists, etc.) in wiki pages for fluid layout users
  2. Center these constrained text blocks within the available space
  3. Allow wider content elements (such as tables, code blocks with long lines, or embedded content) to utilize the full screen width
  4. Preserve existing behavior for users with fixed layout preference

Open questions

1. How should non-text elements (like tables or embedded content) behave when they are narrower than the viewport?

Should they be left-aligned with the other wide elements?

 __________________________________________________________
|          Aliquip fugiat quis commodo irure sunt          |
|          cupidatat ad qui consectetur irure ad           |
|          adipiscing fugiat laborum.                      |
|| very | wide | table | taking | up | the screen | width ||
|| ###  | ###  | ###   | ###    | ## | ###        | ###   ||
|          Eu adipiscing ullamco velit est perata          |
|          deserunt aute velit aute qui ex cillum          |
|          nostrud laboris labore officia.                 |
|| small table |                                           |
|| ####        |                                           |
|          Aute esse velit non ipsum ex nisi cat           |
|          labore reprehenderit duis sint consect          |
|          etur ea do lorem ea incididunt eiusmod.         |
 __________________________________________________________

Should they be left-aligned with the text elements? (This is actually the most difficult one to implement)

 __________________________________________________________
|          Aliquip fugiat quis commodo irure sunt          |
|          cupidatat ad qui consectetur irure ad           |
|          adipiscing fugiat laborum.                      |
|| very | wide | table | taking | up | the screen | width ||
|| ###  | ###  | ###   | ###    | ## | ###        | ###   ||
|          Eu adipiscing ullamco velit est perata          |
|          deserunt aute velit aute qui ex cillum          |
|          nostrud laboris labore officia.                 |
|          | small table |                                 |
|          | ####        |                                 |
|          Aute esse velit non ipsum ex nisi cat           |
|          labore reprehenderit duis sint consect          |
|          etur ea do lorem ea incididunt eiusmod.         |
 __________________________________________________________

Or should they be fully centered on the page?

 __________________________________________________________
|          Aliquip fugiat quis commodo irure sunt          |
|          cupidatat ad qui consectetur irure ad           |
|          adipiscing fugiat laborum.                      |
|| very | wide | table | taking | up | the screen | width ||
|| ###  | ###  | ###   | ###    | ## | ###        | ###   ||
|          Eu adipiscing ullamco velit est perata          |
|          deserunt aute velit aute qui ex cillum          |
|          nostrud laboris labore officia.                 |
|                     | small table |                      |
|                     | ####        |                      |
|          Aute esse velit non ipsum ex nisi cat           |
|          labore reprehenderit duis sint consect          |
|          etur ea do lorem ea incididunt eiusmod.         |
 __________________________________________________________

2. What elements exactly should use the wide layout vs the limited one?

Suggestion:

Limited width (Text-like elements)
  • p
  • h1, h2, h3, h4, h5, h6
  • address
  • blockquote
  • caption
  • dl, dt
  • figcaption
  • legend
  • li, ol, ul
  • pre
  • plaintext
  • summary
  • audio
  • article
Extended width (Block-like elements)
  • table
  • img
  • hr (Horizontal line)
  • canvas
  • figure
  • svg
  • video
  • picture
  • GLQL embedded views
  • Mermaid diagrams
  • Math blocks (KaTeX/MathJax)
Undecided
  • code
  • section
Not applicable

aside, details, footer, header, main, nav, iframe, textarea, form, fieldset, input, select, button, label, a, abbr, b, bdi, bdo, br, cite, code, data, dfn, em, i, kbd, mark, q, s, samp, small, span, strong, sub, sup, time, u, var, wbr, html, head, body, meta, link, style, script, noscript, template, title, base, acronym, applet, basefont, big, center, dir, font, frame, frameset, noframes, strike, tt, dialog, embed, object, param, portal, div, slot, menu, tbody, thead, tfoot, tr, td, th, col, colgroup, ruby, rt, rp, track, source

Related

Screenshots

See the MR !210458 (merged) for before/after screenshots demonstrating the improved readability with width-constrained text blocks.

Edited by Janis Altherr