Firefox-specific display issue

[trnitz]

I accidentally discovered a minor issue, which only impact Firefox, and only with a specific configuration.

If you use the <!--more--> content separator and a codeblock that is longer than the display width, it overflows into the sidebar on Firefox only. Chrome and Safari display the page correctly.

Steps to recreate

1. Create and initialize Hugo, install the Zzo theme, and copy the exampleSite files.

    hugo new site mysite
    cd mysite
    git init
    git clone https://github.com/zzossig/hugo-theme-zzo.git themes/zzo
    cp -r themes/zzo/exampleSite .

2. Create a new post, ensuring that it has a lengthy ( longer than the display width) codeblock, and uses a <!–more–> manual summary split.

   ---
    date: 2021-01-01
    title: I think I found a Zzo code display bug
    categories:
    - Category1
    tags:
    - tag1
    - tag2
    ---
   
    This is an example post, which will contain a code block of greater than 50 characters.
   
    In Firefox, and Firefox *only*, the display looks incorrect, due to the code block size.
   
    Chrome and Safari both render the post correctly.
   
    ```
    printf "This is just an example code block that will show the display issue in Firefox, and Firefox only\n"
    ```
   
    <!--more-->
   
    Some additional text, after the more content separator.

Resulting page in Firefox:

Fix/workaround

I was able to resolve this by specifying the list__main class width to 100% in my assets/css/custom.css file:

.list__main {
    width: 100% !important;
}