diff --git a/src/app/globals.css b/src/app/globals.css
index 248bbcb..60307ea 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -73,6 +73,17 @@ pre code {
   white-space: pre-wrap !important;
 }
 
+.rgp-base {
+  pre {
+    /**
+      https://stackoverflow.com/a/73869778/1068446
+      This seemed to do it for me. 
+    */
+    width: 0 !important;
+    min-width: calc(100% - 2em) !important;
+  }
+}
+
 .react-github-permalink .link-wrapper a {
   word-break: break-word;
 }
diff --git a/src/routes/posts/encapsulate_as_much_state_as_possible.mdx b/src/routes/posts/encapsulate_as_much_state_as_possible.mdx
index d10da11..9c53994 100644
--- a/src/routes/posts/encapsulate_as_much_state_as_possible.mdx
+++ b/src/routes/posts/encapsulate_as_much_state_as_possible.mdx
@@ -91,7 +91,7 @@ Our test now resembles how we're going to use the component in practise, and it'
 
 ## There's nothing say that you couldn't do both
 
-Technically what we could do is do something like expose these components with less functionality as `SpecialButtonStateless` and then use this component in our `SpecialButton` component that then provides the the functionality. 
+Technically what we could do is do something like expose these components with less functionality as `SpecialButtonStateless` and then use this component in our `SpecialButton` component that then provides the functionality. 
 
 I think this would be of limited use - but might be helpful in a larger team with a dedicated design system, and wanting to see the component state statically. 
 I would argue that the functioning `SpecialButton` component that is the important for actually building the application.