From 52ed340f584e01a5c3917c0271fa25c28f758219 Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Thu, 28 Jul 2022 14:24:59 +0000
Subject: [PATCH 1/4] fix: Workspace schedule button on responsive

---
 .../WorkspaceScheduleButton.stories.tsx              |  6 ++++++
 .../WorkspaceScheduleButton.tsx                      | 12 ++++++++++++
 .../WorkspaceScheduleLabel.tsx                       |  4 ++++
 3 files changed, 22 insertions(+)

diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx
index 94d0b8b332160..a0183fbb2470e 100644
--- a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx
+++ b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx
@@ -87,3 +87,9 @@ CannotEdit.args = {
   },
   canUpdateWorkspace: false,
 }
+
+export const SmallViewport = Template.bind({})
+SmallViewport.args = WorkspaceOffShort.args
+SmallViewport.parameters = {
+  chromatic: { viewports: [320] },
+}
diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
index f643b5b4acd05..75eff27ebdff0 100644
--- a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
+++ b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
@@ -140,6 +140,10 @@ const useStyles = makeStyles((theme) => ({
     alignItems: "center",
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: `${theme.shape.borderRadius}px`,
+
+    [theme.breakpoints.down("sm")]: {
+      flexDirection: "column",
+    },
   },
   label: {
     borderRight: 0,
@@ -150,6 +154,7 @@ const useStyles = makeStyles((theme) => ({
       width: "100%",
       display: "flex",
       alignItems: "center",
+      padding: theme.spacing(1, 2),
     },
   },
   actions: {
@@ -162,6 +167,13 @@ const useStyles = makeStyles((theme) => ({
     borderLeft: `1px solid ${theme.palette.divider}`,
     borderRadius: `0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0px`,
     flexShrink: 0,
+
+    [theme.breakpoints.down("sm")]: {
+      width: "100%",
+      borderLeft: 0,
+      borderTop: `1px solid ${theme.palette.divider}`,
+      borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
+    },
   },
   iconButton: {
     borderRadius: 2,
diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleLabel.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleLabel.tsx
index e57ec0087ac8a..c0eb1f2c8e265 100644
--- a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleLabel.tsx
+++ b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleLabel.tsx
@@ -33,6 +33,10 @@ export const WorkspaceScheduleLabel: React.FC<{ workspace: Workspace }> = ({ wor
 const useStyles = makeStyles((theme) => ({
   labelText: {
     marginRight: theme.spacing(2),
+
+    [theme.breakpoints.down("sm")]: {
+      marginRight: 0,
+    },
   },
 
   labelStrong: {

From c1c823e0c2f09424e7a7356bad7cf664ce6231c3 Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Thu, 28 Jul 2022 14:54:30 +0000
Subject: [PATCH 2/4] Fix when have buttons

---
 .../WorkspaceScheduleButton.tsx                |  5 ++++-
 .../WorkspaceScheduleLabel.tsx                 | 18 ++++++++++--------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
index 75eff27ebdff0..0a6ccd312de21 100644
--- a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
+++ b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
@@ -154,12 +154,15 @@ const useStyles = makeStyles((theme) => ({
       width: "100%",
       display: "flex",
       alignItems: "center",
-      padding: theme.spacing(1, 2),
+      padding: theme.spacing(1.5, 2),
     },
   },
   actions: {
     [theme.breakpoints.down("sm")]: {
       marginLeft: "auto",
+      display: "flex",
+      paddingLeft: theme.spacing(1),
+      marginRight: -theme.spacing(1),
     },
   },
   scheduleButton: {
diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleLabel.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleLabel.tsx
index c0eb1f2c8e265..d4b10e4b6db04 100644
--- a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleLabel.tsx
+++ b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleLabel.tsx
@@ -14,18 +14,16 @@ export const WorkspaceScheduleLabel: React.FC<{ workspace: Workspace }> = ({ wor
     // If it is shutting down, we don't need to display the auto stop label
     return (
       <span className={combineClasses([styles.labelText, "chromatic-ignore"])}>
-        {shouldDisplayStrongLabel && (
-          <strong className={styles.labelStrong}>{Language.autoStopLabel}</strong>
-        )}
-        {stopLabel}
+        {shouldDisplayStrongLabel && <strong>{Language.autoStopLabel}</strong>}{" "}
+        <span className={styles.value}>{stopLabel}</span>
       </span>
     )
   }
 
   return (
     <span className={combineClasses([styles.labelText, "chromatic-ignore"])}>
-      <strong className={styles.labelStrong}>{Language.autoStartLabel}</strong>
-      {autoStartDisplay(workspace.autostart_schedule)}
+      <strong>{Language.autoStartLabel}</strong>{" "}
+      <span className={styles.value}>{autoStartDisplay(workspace.autostart_schedule)}</span>
     </span>
   )
 }
@@ -33,13 +31,17 @@ export const WorkspaceScheduleLabel: React.FC<{ workspace: Workspace }> = ({ wor
 const useStyles = makeStyles((theme) => ({
   labelText: {
     marginRight: theme.spacing(2),
+    lineHeight: "160%",
 
     [theme.breakpoints.down("sm")]: {
       marginRight: 0,
+      width: "100%",
     },
   },
 
-  labelStrong: {
-    marginRight: theme.spacing(0.5),
+  value: {
+    [theme.breakpoints.down("sm")]: {
+      whiteSpace: "nowrap",
+    },
   },
 }))

From 2a5ddeffe10dac08e0fe2b40e0dfe4948829bbf4 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 28 Jul 2022 12:45:31 -0300
Subject: [PATCH 3/4] Update
 site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx

Co-authored-by: Abhineet Jain <AbhineetJain@users.noreply.github.com>
---
 .../WorkspaceScheduleButton.stories.tsx                       | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx
index a0183fbb2470e..5eeb9cbc78029 100644
--- a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx
+++ b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx
@@ -89,7 +89,9 @@ CannotEdit.args = {
 }
 
 export const SmallViewport = Template.bind({})
-SmallViewport.args = WorkspaceOffShort.args
+SmallViewport.args = {
+   ...WorkspaceOffShort.args,
+}
 SmallViewport.parameters = {
   chromatic: { viewports: [320] },
 }

From bafa212d7e8d3334c676cca35bdc02d1c2310c1b Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Thu, 28 Jul 2022 16:07:44 +0000
Subject: [PATCH 4/4] Fix formatting

---
 .../WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx
index 5eeb9cbc78029..222be67473ac9 100644
--- a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx
+++ b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx
@@ -90,7 +90,7 @@ CannotEdit.args = {
 
 export const SmallViewport = Template.bind({})
 SmallViewport.args = {
-   ...WorkspaceOffShort.args,
+  ...WorkspaceOffShort.args,
 }
 SmallViewport.parameters = {
   chromatic: { viewports: [320] },