Browse Source

Fix scrolling on home and history

Saoud Rizwan 1 year ago
parent
commit
1b41ee0a6b

+ 1 - 0
webview-ui/src/components/Announcement.tsx

@@ -20,6 +20,7 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 				padding: "12px 16px",
 				margin: "5px 15px 5px 15px",
 				position: "relative",
+				flexShrink: 0,
 			}}>
 			<VSCodeButton
 				appearance="icon"

+ 9 - 3
webview-ui/src/components/ChatView.tsx

@@ -480,9 +480,15 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 					onClose={handleTaskCloseButtonClick}
 				/>
 			) : (
-				<>
+				<div
+					style={{
+						flexGrow: 1,
+						overflowY: "auto",
+						display: "flex",
+						flexDirection: "column",
+					}}>
 					{showAnnouncement && <Announcement version={version} hideAnnouncement={hideAnnouncement} />}
-					<div style={{ padding: "0 20px", flexGrow: taskHistory.length > 0 ? undefined : 1 }}>
+					<div style={{ padding: "0 20px", flexShrink: 0 }}>
 						<h2>What can I do for you?</h2>
 						<p>
 							Thanks to{" "}
@@ -497,7 +503,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 						</p>
 					</div>
 					{taskHistory.length > 0 && <HistoryPreview showHistoryView={showHistoryView} />}
-				</>
+				</div>
 			)}
 			{task && (
 				<>

+ 1 - 1
webview-ui/src/components/HistoryPreview.tsx

@@ -29,7 +29,7 @@ const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
 	}
 
 	return (
-		<div style={{ flexGrow: 1, overflowY: "auto" }}>
+		<div style={{ flexShrink: 0 }}>
 			<style>
 				{`
 					.history-preview-item {

+ 1 - 2
webview-ui/src/components/HistoryView.tsx

@@ -98,7 +98,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 					<h3 style={{ color: "var(--vscode-foreground)", margin: 0 }}>History</h3>
 					<VSCodeButton onClick={onDone}>Done</VSCodeButton>
 				</div>
-				<div style={{ padding: "5px 17px" }}>
+				<div style={{ padding: "5px 17px 10px 17px" }}>
 					<VSCodeTextField
 						style={{ width: "100%" }}
 						placeholder="Search history..."
@@ -147,7 +147,6 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 						style={{
 							flexGrow: 1,
 							overflowY: "scroll",
-							scrollbarWidth: "none",
 						}}
 						data={taskHistorySearchResults}
 						itemContent={(index, item) => (