From 55e538e854a62c56b14ae830f84205ea8a238c47 Mon Sep 17 00:00:00 2001
From: Abhineet Jain <AbhineetJain@users.noreply.github.com>
Date: Wed, 15 Jun 2022 11:16:03 -0400
Subject: [PATCH] fix: break word to wrap long strings in stats, add media
 query (#2310)

* break word to wrap long strings, add media query

* add stories for smaller screens
---
 .../TemplateStats/TemplateStats.stories.tsx   | 21 +++++++++++++++++++
 .../TemplateStats/TemplateStats.tsx           | 10 ++++++++-
 .../WorkspaceBuildStats.tsx                   | 10 ++++++++-
 .../WorkspaceStats/WorkspaceStats.tsx         | 10 ++++++++-
 .../TemplatePage/TemplatePageView.stories.tsx | 10 +++++++++
 5 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/site/src/components/TemplateStats/TemplateStats.stories.tsx b/site/src/components/TemplateStats/TemplateStats.stories.tsx
index 3056187d11..6dc5481454 100644
--- a/site/src/components/TemplateStats/TemplateStats.stories.tsx
+++ b/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] },
+}
diff --git a/site/src/components/TemplateStats/TemplateStats.tsx b/site/src/components/TemplateStats/TemplateStats.tsx
index 3309ab7286..c06827ef9f 100644
--- a/site/src/components/TemplateStats/TemplateStats.tsx
+++ b/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,12 +82,14 @@ 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: {
@@ -92,5 +97,8 @@ const useStyles = makeStyles((theme) => ({
     height: theme.spacing(5),
     backgroundColor: theme.palette.divider,
     marginRight: theme.spacing(2),
+    [theme.breakpoints.down("sm")]: {
+      display: "none",
+    },
   },
 }))
diff --git a/site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.tsx b/site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.tsx
index 4b00dd0584..33a9888b5c 100644
--- a/site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.tsx
+++ b/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,12 +82,14 @@ 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: {
@@ -92,6 +97,9 @@ const useStyles = makeStyles((theme) => ({
     height: theme.spacing(5),
     backgroundColor: theme.palette.divider,
     marginRight: theme.spacing(2),
+    [theme.breakpoints.down("sm")]: {
+      display: "none",
+    },
   },
 
   capitalize: {
diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.tsx b/site/src/components/WorkspaceStats/WorkspaceStats.tsx
index 1299ab46c9..149cd1a472 100644
--- a/site/src/components/WorkspaceStats/WorkspaceStats.tsx
+++ b/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,12 +98,14 @@ 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: {
@@ -108,6 +113,9 @@ const useStyles = makeStyles((theme) => ({
     height: theme.spacing(5),
     backgroundColor: theme.palette.divider,
     marginRight: theme.spacing(2),
+    [theme.breakpoints.down("sm")]: {
+      display: "none",
+    },
   },
 
   capitalize: {
diff --git a/site/src/pages/TemplatePage/TemplatePageView.stories.tsx b/site/src/pages/TemplatePage/TemplatePageView.stories.tsx
index abf42b249e..f9c269e6c8 100644
--- a/site/src/pages/TemplatePage/TemplatePageView.stories.tsx
+++ b/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] },
+}