Fix issue where code blocks dont properly respect page size width

Author: Jonathan Visser

docs/_static/scss/components/defaults/_code.scss

@@ -1,3 +1,5 @@
+@use "../../breakpoints" as *;
+
 .rst-content section ul {
     line-height: auto;
 }
@@ -48,6 +50,15 @@ code.docutils.literal.notranslate {
         border-radius: 8px;
         background-color: #292d3e;
         color: #D9E7F3;
+        width: min(900px, calc(100vw - 100px));
+
+        @media (min-width: $breakpoint-laptop) {
+            width: min(900px, calc(100vw - 600px));
+        }
+
+        @media (min-width: $breakpoint-landscape) {
+            width: min(900px, calc(100vw - 400px));
+        }
 
         .c1 {
             color: var(--message-warning);