diff --git a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx index 02e608e57b..e0682ce907 100644 --- a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx +++ b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx @@ -5,6 +5,7 @@ import { ProvisionerJobLog } from "../../api/typesGenerated" import { MONOSPACE_FONT_FAMILY } from "../../theme/constants" import { Logs } from "../Logs/Logs" import Box from "@mui/material/Box" +import { combineClasses } from "utils/combineClasses" const Language = { seconds: "seconds", @@ -40,11 +41,13 @@ const getStageDurationInSeconds = (logs: ProvisionerJobLog[]) => { export type WorkspaceBuildLogsProps = { logs: ProvisionerJobLog[] + sticky?: boolean hideTimestamps?: boolean } & ComponentProps export const WorkspaceBuildLogs: FC = ({ hideTimestamps, + sticky, logs, ...boxProps }) => { @@ -75,7 +78,12 @@ export const WorkspaceBuildLogs: FC = ({ return ( -
+
{stage}
{shouldDisplayDuration && (
@@ -100,8 +108,6 @@ const useStyles = makeStyles((theme) => ({ alignItems: "center", fontFamily: "Inter", borderBottom: `1px solid ${theme.palette.divider}`, - position: "sticky", - top: 0, background: theme.palette.background.default, "&:last-child": { @@ -114,6 +120,11 @@ const useStyles = makeStyles((theme) => ({ }, }, + sticky: { + position: "sticky", + top: 0, + }, + duration: { marginLeft: "auto", color: theme.palette.text.secondary, diff --git a/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx b/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx index 8d02ed36ca..7c062d2361 100644 --- a/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx @@ -47,7 +47,11 @@ export const WorkspaceBuildLogsSection = ({ })} > {logs ? ( - + ) : (