From 83f9d0dcd752c95d076925e8b22bc99c55a2c422 Mon Sep 17 00:00:00 2001
From: "blinkagent[bot]" <237617714+blinkagent[bot]@users.noreply.github.com>
Date: Wed, 4 Feb 2026 02:20:10 -0500
Subject: [PATCH] chore(site): increase schedule icon button size to match icon
 button style sm (#21829)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR increases the size of the schedule increment/decrement buttons
([-] [+]) to match the icon button style at size `sm` (same as the Stop,
Restart buttons).

## Changes
- Button dimensions: 20×20px → 32×32px
- Icon size: `size-icon-xs` → `size-icon-sm`
- Border radius: 4px → 6px (consistent with other icon buttons)

## Before
The [-] [+] buttons were tiny (20×20px) and difficult to click.

## After
The buttons now match the icon button style at size `sm` (32×32px),
consistent with other topbar buttons.

---
Created on behalf of @christin

---------

Co-authored-by: blink-so[bot] <211532188+blink-so[bot]@users.noreply.github.com>
---
 .../WorkspaceScheduleControls.tsx             | 34 ++++++-------------
 1 file changed, 11 insertions(+), 23 deletions(-)

diff --git a/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx b/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
index f815d116a1..027d384864 100644
--- a/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import IconButton from "@mui/material/IconButton";
 import Link, { type LinkProps } from "@mui/material/Link";
 import { visuallyHidden } from "@mui/utils";
 import { getErrorMessage } from "api/errors";
@@ -8,6 +7,7 @@ import {
 	workspaceByOwnerAndNameKey,
 } from "api/queries/workspaces";
 import type { Template, Workspace } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import { TopbarData, TopbarIcon } from "components/FullPageLayout/Topbar";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import {
@@ -209,17 +209,17 @@ const AutostopDisplay: FC<AutostopDisplayProps> = ({
 		<div css={styles.scheduleControls}>
 			<Tooltip>
 				<TooltipTrigger asChild>
-					<IconButton
+					<Button
 						disabled={!deadlineMinusEnabled}
-						size="small"
-						css={styles.scheduleButton}
+						variant="outline"
+						size="icon"
 						onClick={() => {
 							handleDeadlineChange(deadline.subtract(1, "h"));
 						}}
 					>
-						<MinusIcon className="size-icon-xs" />
+						<MinusIcon />
 						<span style={visuallyHidden}>Subtract 1 hour from deadline</span>
-					</IconButton>
+					</Button>
 				</TooltipTrigger>
 				<TooltipContent side="bottom">
 					Subtract 1 hour from deadline
@@ -227,17 +227,17 @@ const AutostopDisplay: FC<AutostopDisplayProps> = ({
 			</Tooltip>
 			<Tooltip>
 				<TooltipTrigger asChild>
-					<IconButton
+					<Button
 						disabled={!deadlinePlusEnabled}
-						size="small"
-						css={styles.scheduleButton}
+						variant="outline"
+						size="icon"
 						onClick={() => {
 							handleDeadlineChange(deadline.add(1, "h"));
 						}}
 					>
-						<PlusIcon className="size-icon-xs" />
+						<PlusIcon />
 						<span style={visuallyHidden}>Add 1 hour to deadline</span>
-					</IconButton>
+					</Button>
 				</TooltipTrigger>
 				<TooltipContent side="bottom">Add 1 hour to deadline</TooltipContent>
 			</Tooltip>
@@ -327,16 +327,4 @@ const styles = {
 		alignItems: "center",
 		gap: 4,
 	},
-
-	scheduleButton: (theme) => ({
-		border: `1px solid ${theme.palette.divider}`,
-		borderRadius: 4,
-		width: 20,
-		height: 20,
-
-		"& svg.MuiSvgIcon-root": {
-			width: 12,
-			height: 12,
-		},
-	}),
 } satisfies Record<string, Interpolation<Theme>>;