diff --git a/.changeset/real-tigers-like.md b/.changeset/real-tigers-like.md
new file mode 100644
index 000000000000..58f85a4c02e5
--- /dev/null
+++ b/.changeset/real-tigers-like.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Stop toolbar settings from overflowing
diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
index 09fa8da26d3e..f778c9856b93 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
@@ -83,6 +83,8 @@ export default {
 				`<style>
 					:host astro-dev-toolbar-window {
 						height: 480px;
+						overflow-y: auto;
+						color-scheme: dark;
 
 						--color-purple: rgba(224, 204, 250, 1);
 					}
@@ -141,6 +143,9 @@ export default {
 					label > section {
 						max-width: 67%;
 					}
+					label > section.full-width {
+						max-width: 100%;
+					}
 					p {
 						line-height: 1.5em;
 					}
@@ -158,7 +163,7 @@ export default {
 				<hr id="general"/>
 
 				<label class="setting-row">
-					<section>
+					<section class="full-width">
 						<h3>Hide toolbar</h3>
 						Run <code>astro preferences disable devToolbar</code> in your terminal to disable the toolbar. <a href="https://docs.astro.build/en/reference/cli-reference/#astro-preferences" target="_blank">Learn more</a>.
 					</section>