Long code lines expands text outside view on mobile Safari

[kinnoukabokudo]

I am experiencing issues where long code lines in a code block can cause mobile browsers to overflow without scrollbars either in the view or the code block.

An example would be a code block like below:

import BackgroundTasks
...
    
BGTaskScheduler.shared.register(forTaskWithIdentifier: "com.demo.refresh", using: nil) { task in
    let refreshAppTask = task as! BGAppRefreshTask
    
    refreshAppTask.expirationHandler = {
        
    }
    
    ...
    
    task.setTaskCompleted(success: true)
}

...

I am attempted to fix the issue:

pre {
  overflow: auto;
  padding: double($base-spacing-unit);
  margin-bottom: $base-spacing-unit;
  font-size: $font-size-medium;
  line-height: $line-height-medium;
  white-space: pre-wrap;
  display: inline-block;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

But unsuccessfully.