Olivero: various elements (blockquote, pre, embeded media) can overflow into sidebar when vertical toolbar is present

Created on 29 June 2021, over 3 years ago
Updated 18 September 2024, about 1 month ago

Problem/Motivation

Various elements within the Olivero theme overflow beyond the "content narrow" layout to span additional grid columns.

If the admin toolbar is in vertical orientation and is open, these elements can overflow (either into sidebar or cause horizontal scrolling).

Steps to reproduce

  1. Make Olivero the default theme
  2. Go to any Basic page
  3. Make sure that some text is added with the quotes or images, videos, etc
  4. Click on manage and click to change to vertical orientation so admin toolbar is vertical
  5. Result: Verify the elements overflow when using a small screen
  6. Expected: Elements should not overflow into sidebar or cause horizontal scrolling

Proposed resolution

CSS updates to adjust overflow.

Remaining tasks

  1. Create patch
  2. Review patch
  3. Test patch
  4. Commit

User interface changes

API changes

Data model changes

Release notes snippet

๐Ÿ› Bug report
Status

Needs work

Version

11.0 ๐Ÿ”ฅ

Component
Oliveroย  โ†’

Last updated about 7 hours ago

Created by

๐Ÿ‡บ๐Ÿ‡ธUnited States mherchel Gainesville, FL, US

Live updates comments and jobs are added and updated live.
  • CSS

    It involves the content or handling of Cascading Style Sheets.

  • Needs manual testing

    The change/bugfix cannot be fully demonstrated by automated testing, and thus requires manual testing in a variety of environments.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany marc.bau

    Can we get a fix committed, please?

  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany marc.bau

    This will help with readability of pre fields a lot...

    .region--content pre {
        white-space: pre;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    
  • First commit to issue fork.
  • Status changed to Needs review about 1 month ago

  • Fixing the Overflow Issue in Drupal with

     Elements
    
    The Issue:
    We encountered a layout issue in Drupal where elements like 
    , blockquotes, and embedded media were overflowing into the sidebar when the vertical toolbar was present. This was messing up the layout, making the content look cluttered and out of place.
    
    Root Cause:
    The issue was happening because these elements (especially <pre>) didnโ€™t respect the boundaries of their container. Since <pre> preserves whitespace and line breaks, it was forcing the content to extend outside the content area, causing it to overlap into the sidebar.
    
    Steps Followed to Fix the Issue:
    
    Identifying the Problem:
    
    First, we identified that the primary culprit was the <pre> element. The content inside the <pre> tags wasnโ€™t wrapping properly, and that led to the overflow problem.
    Checking the CSS:
    
    We realized that this could be a CSS issue where the <pre> block was not being handled correctly. We needed to make sure that the content inside 
     respects the containerโ€™s width.
    Solution Applied: We decided to tackle this problem by applying custom CSS to ensure the 
     content stays within the container. Hereโ€™s the magic CSS that solved it: 
    Thanks @marc.bau
    
    css
    Copy code
    
    
    .region--content pre {
      white-space: pre;
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    Explanation of the CSS:

    white-space: pre; ensures that the whitespace inside the <pre> element is preserved.
    white-space: pre-wrap; makes sure that long lines of text are wrapped properly if they exceed the width of the container.
    word-wrap: break-word; ensures that if a long word or continuous string of characters is too wide for the container, it will break into the next line rather than overflowing.

    Testing:

    After applying this CSS, we tested the layout with different content inside <pre> blocks, and voila! The content no longer overflowed into the sidebar. The text wrapped properly, and the layout stayed intact.

  • Status changed to Needs work about 1 month ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave
  • Merge request !9575Issue #3221247 adde pre wrap css โ†’ (Closed) created by Unnamed author
Production build 0.71.5 2024