Move progress to bottom

code-asher · code-asher · commit d0bc61d35c22 · 2025-06-24T12:50:11.000-08:00
And remove the duplicate "Starting workspace..." text.
diff --git a/site/src/pages/TaskPage/TaskPage.tsx b/site/src/pages/TaskPage/TaskPage.tsx
@@ -109,22 +109,23 @@ const TaskPage = () => {
 		// If no template yet, use an indeterminate progress bar.
 		const transition = (template &&
 			ActiveTransition(template, task.workspace)) || { P50: 0, P95: null };
-		const lastStage = buildLogs?.[buildLogs.length - 1]?.stage;
+		const lastStage =
+			buildLogs?.[buildLogs.length - 1]?.stage || "Waiting for build status";
 		content = (
-			<div className="w-full min-h-80 flex flex-col items-center justify-center gap-2">
-				<div className="flex flex-col items-center">
+			<div className="w-full min-h-80 flex flex-col">
+				<div className="flex flex-col items-center grow justify-center">
 					<h3 className="m-0 font-medium text-content-primary text-base">
 						Starting your workspace
 					</h3>
+					{lastStage && (
+						<div className="text-content-secondary text-sm">{lastStage}</div>
+					)}
 				</div>
-				{lastStage && (
-					<div className="text-content-secondary text-sm">{lastStage}</div>
-				)}
-				<div css={{ minWidth: 315 }}>
+				<div className="w-full">
 					<WorkspaceBuildProgress
 						workspace={task.workspace}
 						transitionStats={transition}
-						stack={true}
+						style="task"
 					/>
 				</div>
 			</div>
diff --git a/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx b/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx
@@ -62,14 +62,13 @@ const estimateFinish = (
 interface WorkspaceBuildProgressProps {
 	workspace: Workspace;
 	transitionStats: TransitionStats;
-	// stack indicates to stack the text vertically, otherwise put it on one line.
-	stack?: boolean;
+	style?: "workspace" | "task";
 }
 
 export const WorkspaceBuildProgress: FC<WorkspaceBuildProgressProps> = ({
 	workspace,
 	transitionStats,
-	stack,
+	style,
 }) => {
 	const job = workspace.latest_build.job;
 	const [progressValue, setProgressValue] = useState<number | undefined>(0);
@@ -117,6 +116,13 @@ export const WorkspaceBuildProgress: FC<WorkspaceBuildProgressProps> = ({
 	}
 	return (
 		<div css={styles.stack}>
+			{style === "task" && (
+				<div className={"mb-1 text-center"}>
+					<div css={styles.label} data-chromatic="ignore">
+						{progressText}
+					</div>
+				</div>
+			)}
 			<LinearProgress
 				data-chromatic="ignore"
 				value={progressValue !== undefined ? progressValue : 0}
@@ -132,23 +138,31 @@ export const WorkspaceBuildProgress: FC<WorkspaceBuildProgressProps> = ({
 				// If a transition is set, there is a moment on new load where the
 				// bar accelerates to progressValue and then rapidly decelerates, which
 				// is not indicative of true progress.
-				classes={{ bar: classNames.bar }}
+				classes={{
+					bar: classNames.bar,
+					root: style === "task" ? classNames.root : undefined,
+				}}
 			/>
-			<div className={stack ? "leading-tight mt-1" : "flex mt-1 justify-between"}>
-				<div css={styles.label}>
-					{capitalize(workspace.latest_build.status)} workspace...
-				</div>
-				<div css={styles.label} data-chromatic="ignore">
-					{progressText}
+			{style !== "task" && (
+				<div className={"flex mt-1 justify-between"}>
+					<div css={styles.label}>
+						{capitalize(workspace.latest_build.status)} workspace...
+					</div>
+					<div css={styles.label} data-chromatic="ignore">
+						{progressText}
+					</div>
 				</div>
-			</div>
+			)}
 		</div>
 	);
 };
 
 const classNames = {
 	bar: css`
     transition: none;
+  `,
+	root: css`
+    border-radius: 0;
   `,
 };
 
