diff --git a/site/src/includes/components/docs-aside.njk b/site/src/includes/components/docs-aside.njk
index 0a958cef..3159cbdd 100644
--- a/site/src/includes/components/docs-aside.njk
+++ b/site/src/includes/components/docs-aside.njk
@@ -17,7 +17,7 @@
 	</li>
 {% endmacro %}
 
-<aside class="flex-shrink-0 top-24 md:top-0 md:relative w-full md:w-1/4">
+<aside class="flex-shrink-0 top-24 md:top-0 md:relative w-full md:w-1/4 max-w-[260px]">
 	<input id="menu-toggle" type="checkbox" class="menu-state absolute invisible h-0 w-0 md:hidden"/>
 	<label for="menu-toggle" aria-title="Open Menu" class="flex items-center md:hidden py-2 border-t border-b border-gray-100 dark:border-gray-800 text-gray-500 dark:text-gray-300 mb-8 font-medium">
 		<div class="burger-icon" role="icon">
diff --git a/site/src/layouts/docs.njk b/site/src/layouts/docs.njk
index efbf5668..20371f21 100644
--- a/site/src/layouts/docs.njk
+++ b/site/src/layouts/docs.njk
@@ -15,7 +15,7 @@ layout: base.njk
 	#}
 		<div class="order-1 max-w-full flex-grow">
 		<h1 class="text-2xl md:text-4xl font-bold mb-6 md:mb-8 text-brand-900 dark:text-brand-100">{{ title }}</h1>
-			<div class="prose dark:prose-dark">{{ layoutContent | safe }}</div>
+			<div class="prose dark:prose-dark max-w-full">{{ layoutContent | safe }}</div>
 		</div>
 		<footer class="order-3 min-w-full flex mt-4 justify-end mr-1 text-sm text-gray-500 dark:text-gray-300 space-x-3 leading-5">
 			<span>
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
index 49e23284..3b964435 100644
--- a/site/tailwind.config.js
+++ b/site/tailwind.config.js
@@ -27,8 +27,8 @@ module.exports = {
 				padding: spacing[4],
 				screens: {
 					sm: '100%',
-					md: '860px',
-					lg: '940px',
+					md: '1024px',
+					lg: '1200px',
 					xl: false,
 				},
 			},