fix: Workspace schedule button on responsive (#3264)

BrunoQuaresma · web-flow · commit 1a8cce27ae23 · 2022-07-28T16:17:50.000Z
diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx
@@ -87,3 +87,11 @@ 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
@@ -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,18 +154,29 @@ const useStyles = makeStyles((theme) => ({
       width: "100%",
       display: "flex",
       alignItems: "center",
+      padding: theme.spacing(1.5, 2),
     },
   },
   actions: {
     [theme.breakpoints.down("sm")]: {
       marginLeft: "auto",
+      display: "flex",
+      paddingLeft: theme.spacing(1),
+      marginRight: -theme.spacing(1),
     },
   },
   scheduleButton: {
     border: "none",
     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
@@ -14,28 +14,34 @@ 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>
   )
 }
 
 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",
+    },
   },
 }))
