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;
}