## 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 - MR: !210458 (Draft implementation) ## Screenshots See the MR !210458 for before/after screenshots demonstrating the improved readability with width-constrained text blocks.