diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx index 9a6416972dd53..6ea052d33c008 100644 --- a/site/src/components/PageHeader/PageHeader.tsx +++ b/site/src/components/PageHeader/PageHeader.tsx @@ -1,15 +1,17 @@ import { makeStyles } from "@material-ui/core/styles" +import { combineClasses } from "../../util/combineClasses" import { Stack } from "../Stack/Stack" export interface PageHeaderProps { actions?: JSX.Element + className?: string } -export const PageHeader: React.FC = ({ children, actions }) => { +export const PageHeader: React.FC = ({ children, actions, className }) => { const styles = useStyles() return ( -
+
{children}
{actions} diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx index 0646421e5be78..fa2b07c72253e 100644 --- a/site/src/components/Workspace/Workspace.tsx +++ b/site/src/components/Workspace/Workspace.tsx @@ -1,7 +1,6 @@ import { makeStyles } from "@material-ui/core/styles" import { FC } from "react" import * as TypesGen from "../../api/typesGenerated" -import { MONOSPACE_FONT_FAMILY } from "../../theme/constants" import { BuildsTable } from "../BuildsTable/BuildsTable" import { Margins } from "../Margins/Margins" import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "../PageHeader/PageHeader" @@ -49,6 +48,7 @@ export const Workspace: FC = ({ return ( = ({ ) } +const spacerWidth = 300 + export const useStyles = makeStyles((theme) => { return { firstColumnSpacer: { flex: 2, }, secondColumnSpacer: { - flex: "0 0 300px", + flex: `0 0 ${spacerWidth}px`, }, header: { - paddingTop: theme.spacing(5), - paddingBottom: theme.spacing(5), - fontFamily: MONOSPACE_FONT_FAMILY, - display: "flex", - alignItems: "center", - justifyContent: "space-between", - }, - title: { - fontWeight: 600, - fontFamily: "inherit", - }, - subtitle: { - fontFamily: "inherit", - marginTop: theme.spacing(0.5), + // 100% - (the size of sidebar + the space between both ) + maxWidth: `calc(100% - (${spacerWidth}px + ${theme.spacing(3)}px))`, }, layout: { alignItems: "flex-start",