fix: break word to wrap long strings in stats, add media query (coder#2310)

* break word to wrap long strings, add media query

* add stories for smaller screens

Author: AbhineetJain

site/src/components/TemplateStats/TemplateStats.stories.tsx

@@ -23,3 +23,24 @@ UsedByMany.args = {
   },
   activeVersion: Mocks.MockTemplateVersion,
 }
+
+export const LongTemplateVersion = Template.bind({})
+LongTemplateVersion.args = {
+  template: Mocks.MockTemplate,
+  activeVersion: {
+    ...Mocks.MockTemplateVersion,
+    name: "thisisareallyreallylongnamefortesting",
+  },
+}
+LongTemplateVersion.parameters = {
+  chromatic: { viewports: [960] },
+}
+
+export const SmallViewport = Template.bind({})
+SmallViewport.args = {
+  template: Mocks.MockTemplate,
+  activeVersion: Mocks.MockTemplateVersion,
+}
+SmallViewport.parameters = {
+  chromatic: { viewports: [600] },
+}

site/src/components/TemplateStats/TemplateStats.tsx

@@ -66,6 +66,9 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.text.secondary,
     fontFamily: MONOSPACE_FONT_FAMILY,
     border: `1px solid ${theme.palette.divider}`,
+    [theme.breakpoints.down("sm")]: {
+      display: "block",
+    },
   },
 
   statItem: {
@@ -79,18 +82,23 @@ const useStyles = makeStyles((theme) => ({
     textTransform: "uppercase",
     display: "block",
     fontWeight: 600,
+    wordWrap: "break-word",
   },
 
   statsValue: {
     fontSize: 16,
     marginTop: theme.spacing(0.25),
-    display: "inline-block",
+    display: "block",
+    wordWrap: "break-word",
   },
 
   statsDivider: {
     width: 1,
     height: theme.spacing(5),
     backgroundColor: theme.palette.divider,
     marginRight: theme.spacing(2),
+    [theme.breakpoints.down("sm")]: {
+      display: "none",
+    },
   },
 }))

site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.tsx

@@ -66,6 +66,9 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.text.secondary,
     fontFamily: MONOSPACE_FONT_FAMILY,
     border: `1px solid ${theme.palette.divider}`,
+    [theme.breakpoints.down("sm")]: {
+      display: "block",
+    },
   },
 
   statItem: {
@@ -79,19 +82,24 @@ const useStyles = makeStyles((theme) => ({
     textTransform: "uppercase",
     display: "block",
     fontWeight: 600,
+    wordWrap: "break-word",
   },
 
   statsValue: {
     fontSize: 16,
     marginTop: theme.spacing(0.25),
-    display: "inline-block",
+    display: "block",
+    wordWrap: "break-word",
   },
 
   statsDivider: {
     width: 1,
     height: theme.spacing(5),
     backgroundColor: theme.palette.divider,
     marginRight: theme.spacing(2),
+    [theme.breakpoints.down("sm")]: {
+      display: "none",
+    },
   },
 
   capitalize: {

site/src/components/WorkspaceStats/WorkspaceStats.tsx

@@ -82,6 +82,9 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.text.secondary,
     fontFamily: MONOSPACE_FONT_FAMILY,
     margin: "0px",
+    [theme.breakpoints.down("sm")]: {
+      display: "block",
+    },
   },
 
   statItem: {
@@ -95,19 +98,24 @@ const useStyles = makeStyles((theme) => ({
     textTransform: "uppercase",
     display: "block",
     fontWeight: 600,
+    wordWrap: "break-word",
   },
 
   statsValue: {
     fontSize: 16,
     marginTop: theme.spacing(0.25),
-    display: "inline-block",
+    display: "block",
+    wordWrap: "break-word",
   },
 
   statsDivider: {
     width: 1,
     height: theme.spacing(5),
     backgroundColor: theme.palette.divider,
     marginRight: theme.spacing(2),
+    [theme.breakpoints.down("sm")]: {
+      display: "none",
+    },
   },
 
   capitalize: {

site/src/pages/TemplatePage/TemplatePageView.stories.tsx

@@ -15,3 +15,13 @@ Example.args = {
   activeTemplateVersion: Mocks.MockTemplateVersion,
   templateResources: [Mocks.MockWorkspaceResource, Mocks.MockWorkspaceResource2],
 }
+
+export const SmallViewport = Template.bind({})
+SmallViewport.args = {
+  template: Mocks.MockTemplate,
+  activeTemplateVersion: Mocks.MockTemplateVersion,
+  templateResources: [Mocks.MockWorkspaceResource, Mocks.MockWorkspaceResource2],
+}
+SmallViewport.parameters = {
+  chromatic: { viewports: [600] },
+}