Update webview-ui/src/components/chat/chat-view/components/layout/MessagesArea.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

package.json

@@ -119,7 +119,8 @@
 				{
 					"type": "webview",
 					"id": "claude-dev.SidebarProvider",
-					"name": ""
+					"name": "",
+					"icon": "assets/icons/icon.svg"
 				}
 			]
 		},

webview-ui/src/App.tsx

@@ -58,7 +58,7 @@ const AppContent = () => {
 	}
 
 	return (
-		<div className="flex h-full w-full">
+		<div className="flex h-screen w-full flex-col">
 			{showSettings && <SettingsView onDone={hideSettings} />}
 			{showHistory && <HistoryView onDone={hideHistory} />}
 			{showMcp && <McpView initialTab={mcpTab} onDone={closeMcpView} />}

webview-ui/src/components/chat/ChatView.tsx

@@ -28,6 +28,7 @@ import {
 	useScrollBehavior,
 	WelcomeSection,
 } from "./chat-view"
+import AutoApproveBar from "./auto-approve-menu/AutoApproveBar"
 
 interface ChatViewProps {
 	isHidden: boolean
@@ -198,8 +199,6 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 
 	// Use message handlers hook
 	const messageHandlers = useMessageHandlers(messages, chatState, isStreaming)
-	const { handleSendMessage, handlePrimaryButtonClick, handleSecondaryButtonClick, handleTaskCloseButtonClick } =
-		messageHandlers
 
 	const { selectedModelInfo } = useMemo(() => {
 		return normalizeApiConfiguration(apiConfiguration, mode)
@@ -347,17 +346,19 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 					showHistoryView={showHistoryView}
 				/>
 			)}
-
 			{task && (
-				<>
-					<MessagesArea
-						task={task}
-						groupedMessages={groupedMessages}
-						modifiedMessages={modifiedMessages}
-						scrollBehavior={scrollBehavior}
-						chatState={chatState}
-						messageHandlers={messageHandlers}
-					/>
+				<MessagesArea
+					task={task}
+					groupedMessages={groupedMessages}
+					modifiedMessages={modifiedMessages}
+					scrollBehavior={scrollBehavior}
+					chatState={chatState}
+					messageHandlers={messageHandlers}
+				/>
+			)}
+			<footer className="flex-shrink-0 justify-end">
+				<AutoApproveBar />
+				{task && (
 					<ActionButtons
 						chatState={chatState}
 						messageHandlers={messageHandlers}
@@ -368,17 +369,16 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 							showScrollToBottom: scrollBehavior.showScrollToBottom,
 						}}
 					/>
-				</>
-			)}
-
-			<InputSection
-				chatState={chatState}
-				messageHandlers={messageHandlers}
-				scrollBehavior={scrollBehavior}
-				placeholderText={placeholderText}
-				shouldDisableFilesAndImages={shouldDisableFilesAndImages}
-				selectFilesAndImages={selectFilesAndImages}
-			/>
+				)}
+				<InputSection
+					chatState={chatState}
+					messageHandlers={messageHandlers}
+					scrollBehavior={scrollBehavior}
+					placeholderText={placeholderText}
+					shouldDisableFilesAndImages={shouldDisableFilesAndImages}
+					selectFilesAndImages={selectFilesAndImages}
+				/>
+			</footer>
 		</ChatLayout>
 	)
 }

webview-ui/src/components/chat/chat-view/components/layout/ChatLayout.tsx

@@ -17,12 +17,12 @@ export const ChatLayout: React.FC<ChatLayoutProps> = ({ isHidden, children }) =>
 const ChatLayoutContainer = styled.div.withConfig({
 	shouldForwardProp: (prop) => !["isHidden"].includes(prop),
 })<{ isHidden: boolean }>`
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
 	display: ${(props) => (props.isHidden ? "none" : "flex")};
 	flex-direction: column;
 	overflow: hidden;
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	height: 100%;
+	min-height: 100vh;
 `

webview-ui/src/components/chat/chat-view/components/layout/MessagesArea.tsx

@@ -62,8 +62,8 @@ export const MessagesArea: React.FC<MessagesAreaProps> = ({
 	)
 
 	return (
-		<>
-			<div style={{ flexGrow: 1, display: "flex" }} ref={scrollContainerRef}>
+		<div className="overflow-hidden flex flex-col h-full">
+			<div className="flex-grow flex" ref={scrollContainerRef}>
 				<Virtuoso
 					ref={virtuosoRef}
 					key={task.ts} // trick to make sure virtuoso re-renders when task changes, and we use initialTopMostItemIndex to start at the bottom
@@ -93,7 +93,6 @@ export const MessagesArea: React.FC<MessagesAreaProps> = ({
 					initialTopMostItemIndex={groupedMessages.length - 1}
 				/>
 			</div>
-			<AutoApproveBar />
-		</>
+		</div>
 	)
 }

webview-ui/src/components/chat/chat-view/components/layout/WelcomeSection.tsx

@@ -21,23 +21,14 @@ export const WelcomeSection: React.FC<WelcomeSectionProps> = ({
 	shouldShowQuickWins,
 }) => {
 	return (
-		<>
-			<div
-				style={{
-					flex: "1 1 0",
-					minHeight: 0,
-					overflowY: "auto",
-					display: "flex",
-					flexDirection: "column",
-					paddingBottom: "10px",
-				}}>
+		<div className="flex flex-col flex-1 w-full h-full p-0 m-0">
+			<div className="overflow-y-auto flex flex-col pb-2.5">
 				{telemetrySetting === "unset" && <TelemetryBanner />}
 				{showAnnouncement && <Announcement version={version} hideAnnouncement={hideAnnouncement} />}
 				<HomeHeader />
 				{!shouldShowQuickWins && taskHistory.length > 0 && <HistoryPreview showHistoryView={showHistoryView} />}
 			</div>
 			<SuggestedTasks shouldShowQuickWins={shouldShowQuickWins} />
-			<AutoApproveBar />
-		</>
+		</div>
 	)
 }

webview-ui/src/components/menu/Navbar.tsx

@@ -45,7 +45,7 @@ export const Navbar = () => {
 	return (
 		<nav
 			id="cline-navbar-container"
-			className="fixed top-0 right-2 inline-flex justify-end bg-transparent shadow-sm max-h-[20px] w-full gap-2 mb-1 z-10 border-none items-center">
+			className="flex-none inline-flex justify-end bg-transparent shadow-sm gap-2 mb-1 z-10 border-none items-center mr-4!">
 			{SETTINGS_TABS.map((tab) => (
 				<TabTrigger
 					key={`navbar-trigger-${tab.id}`}

webview-ui/src/index.css

@@ -26,11 +26,20 @@ https://github.com/gitkraken/vscode-gitlens/blob/b1d71d4844523e8b2ef16f9e007068e
 
 html {
 	height: 100%;
+	width: 100%;
 }
 
 body {
 	margin: 0;
+	padding: 0;
 	line-height: 1.25;
+	height: 100%;
+	width: 100%;
+}
+
+#root {
+	height: 100%;
+	width: 100%;
 }
 
 body.scrollable,