Wrap code text in template readme files (#2562)

AbhineetJain · web-flow · commit bd19fcbae144 · 2022-06-22T11:01:43.000-04:00
diff --git a/site/src/pages/TemplatePage/TemplatePageView.stories.tsx b/site/src/pages/TemplatePage/TemplatePageView.stories.tsx
@@ -19,7 +19,19 @@ Example.args = {
 export const SmallViewport = Template.bind({})
 SmallViewport.args = {
   template: Mocks.MockTemplate,
-  activeTemplateVersion: Mocks.MockTemplateVersion,
+  activeTemplateVersion: {
+    ...Mocks.MockTemplateVersion,
+    readme: `---
+name:Template test
+---
+## Instructions
+You can add instructions here
+
+[Some link info](https://coder.com)
+\`\`\`
+# This is a really long sentence to test that the code block wraps into a new line properly.
+\`\`\``,
+  },
   templateResources: [Mocks.MockWorkspaceResource, Mocks.MockWorkspaceResource2],
 }
 SmallViewport.parameters = {
diff --git a/site/src/pages/TemplatePage/TemplatePageView.tsx b/site/src/pages/TemplatePage/TemplatePageView.tsx
@@ -83,6 +83,12 @@ export const useStyles = makeStyles((theme) => {
     markdownWrapper: {
       background: theme.palette.background.paper,
       padding: theme.spacing(3.5),
+
+      // Adds text wrapping to <pre> tag added by ReactMarkdown
+      "& pre": {
+        whiteSpace: "pre-wrap",
+        wordWrap: "break-word",
+      },
     },
     resourcesTableContents: {
       margin: 0,
