From 873cb1fcc517742c81529f7788bd8caf1b5018e0 Mon Sep 17 00:00:00 2001
From: Matt Rubens <mrubens@users.noreply.github.com>
Date: Tue, 11 Feb 2025 12:52:54 -0500
Subject: [PATCH] Make let's go button sticky

---
 .../src/components/welcome/WelcomeView.tsx    | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/webview-ui/src/components/welcome/WelcomeView.tsx b/webview-ui/src/components/welcome/WelcomeView.tsx
index 92f2d90b96..912d36fcb1 100644
--- a/webview-ui/src/components/welcome/WelcomeView.tsx
+++ b/webview-ui/src/components/welcome/WelcomeView.tsx
@@ -21,23 +21,26 @@ const WelcomeView = () => {
 	}
 
 	return (
-		<div style={{ position: "fixed", top: 0, left: 0, right: 0, bottom: 0, padding: "0 20px" }}>
-			<h2>Hi, I'm Roo!</h2>
-			<p>
-				I can do all kinds of tasks thanks to the latest breakthroughs in agentic coding capabilities and access
-				to tools that let me create & edit files, explore complex projects, use the browser, and execute
-				terminal commands (with your permission, of course). I can even use MCP to create new tools and extend
-				my own capabilities.
-			</p>
+		<div className="flex flex-col min-h-screen px-0 pb-5">
+			<div className="flex-grow">
+				<h2>Hi, I'm Roo!</h2>
+				<p>
+					I can do all kinds of tasks thanks to the latest breakthroughs in agentic coding capabilities and
+					access to tools that let me create & edit files, explore complex projects, use the browser, and
+					execute terminal commands (with your permission, of course). I can even use MCP to create new tools
+					and extend my own capabilities.
+				</p>
 
-			<b>To get started, this extension needs an API provider.</b>
+				<b>To get started, this extension needs an API provider.</b>
 
-			<div style={{ marginTop: "10px" }}>
-				<ApiOptions fromWelcomeView />
-				<div style={{ display: "flex", flexDirection: "column", gap: "5px" }}>
-					<VSCodeButton onClick={handleSubmit} style={{ marginTop: "3px" }}>
-						Let's go!
-					</VSCodeButton>
+				<div className="mt-3">
+					<ApiOptions fromWelcomeView />
+				</div>
+			</div>
+
+			<div className="sticky bottom-0 bg-[var(--vscode-editor-background)] py-3">
+				<div className="flex flex-col gap-1.5">
+					<VSCodeButton onClick={handleSubmit}>Let's go!</VSCodeButton>
 					{errorMessage && <span className="text-destructive">{errorMessage}</span>}
 				</div>
 			</div>