Improve code blocks layout on mobile

atw · atw · commit 89ab350332be · 2017-04-02T15:06:12.000+02:00
Limit the code block width to the viewport size and if necessary show
horizontal scrollbar on given block. It unifies the layout of code
blocks with active and inactive editor, and prevents horizontal
scrolling on the whole page.
diff --git a/html/css/ejs.css b/html/css/ejs.css
@@ -53,6 +53,8 @@ pre {
   padding: 5px 0 5px 15px;
   line-height: 1.35;
   margin: 1rem 0;
+  max-width: 100%;
+  overflow-x: auto;
 }
 
 pre[data-language=javascript] {

Original file line number	Diff line number	Diff line change
`@@ -53,6 +53,8 @@ pre {`
`53`	`53`	`padding: 5px 0 5px 15px;`
`54`	`54`	`line-height: 1.35;`
`55`	`55`	`margin: 1rem 0;`
	`56`	`+ max-width: 100%;`
	`57`	`+ overflow-x: auto;`
`56`	`58`	`}`
`57`	`59`
`58`	`60`	`pre[data-language=javascript] {`