From a01d923f2f82ebe8f3a8aa9eae28bef3d389f7cb Mon Sep 17 00:00:00 2001
From: Matt Rubens <mrubens@users.noreply.github.com>
Date: Sun, 2 Feb 2025 02:31:48 -0500
Subject: [PATCH] Make list of modes multi-line on the prompts page

---
 .changeset/breezy-badgers-refuse.md              |  5 +++++
 .../src/components/prompts/PromptsView.tsx       | 16 ++++++----------
 2 files changed, 11 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/breezy-badgers-refuse.md

diff --git a/.changeset/breezy-badgers-refuse.md b/.changeset/breezy-badgers-refuse.md
new file mode 100644
index 000000000..50cbbe926
--- /dev/null
+++ b/.changeset/breezy-badgers-refuse.md
@@ -0,0 +1,5 @@
+---
+"roo-cline": patch
+---
+
+Visual cleanup to the list of modes on the prompts tab
diff --git a/webview-ui/src/components/prompts/PromptsView.tsx b/webview-ui/src/components/prompts/PromptsView.tsx
index 68278785f..eff9f99f4 100644
--- a/webview-ui/src/components/prompts/PromptsView.tsx
+++ b/webview-ui/src/components/prompts/PromptsView.tsx
@@ -472,13 +472,11 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 					<div
 						style={{
 							display: "flex",
-							gap: "16px",
+							gap: "8px",
 							alignItems: "center",
 							marginBottom: "12px",
-							overflowX: "auto",
-							flexWrap: "nowrap",
-							paddingBottom: "4px",
-							paddingRight: "20px",
+							flexWrap: "wrap",
+							padding: "4px 0",
 						}}>
 						{modes.map((modeConfig) => {
 							const isActive = mode === modeConfig.slug
@@ -859,13 +857,11 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 					<div
 						style={{
 							display: "flex",
-							gap: "16px",
+							gap: "8px",
 							alignItems: "center",
 							marginBottom: "12px",
-							overflowX: "auto",
-							flexWrap: "nowrap",
-							paddingBottom: "4px",
-							paddingRight: "20px",
+							flexWrap: "wrap",
+							padding: "4px 0",
 						}}>
 						{Object.keys(supportPrompt.default).map((type) => (
 							<button