Try to fix code block and image width issues

lib/web/frontend/src/style/base-layout.scss

@@ -115,5 +115,11 @@ body {
 
     padding: $layout-padding;
     max-width: $content-max-width;
+
+    // For some reason this fixes our code blocks in the posts, otherwise they will overflow the
+    // container
+    // Found on: https://stackoverflow.com/questions/45468633/pre-tag-causing-page-to-scroll-horizontally-in-css-grid#comment77898323_45468633
+    // WTF?!
+    min-width: 0;
   }
 }

lib/web/frontend/src/style/post-layout.scss

@@ -1,4 +1,6 @@
 .post {
+  max-width: 100%;
+
   header {
     border-bottom: 1px solid lighten($accent-background, 50%);
   }
@@ -26,10 +28,15 @@
   pre[class*="language-"] {
     // Code should not enlargen mobile layouts, so remove 40px for padding.
     max-width: calc(100vw - 20px * 2);
+
+    @media #{$md} {
+      max-width: 100%;
+    }
   }
 
   iframe.youtube {
     display: block;
+    max-width: 100%;
     width: 100%;
     height: 200px;
 
@@ -46,7 +53,11 @@
     }
   }
 
-  figure.thumbnail {
+  img {
+    max-width: 100%;
+  }
+
+  figure {
     max-width: 100%;
     text-align: center;
     margin: 20px 0;