diff --git a/site/src/pages/TemplatePage/TemplatePageView.stories.tsx b/site/src/pages/TemplatePage/TemplatePageView.stories.tsx index f9c269e6c88a9..e553b1844aa3c 100644 --- 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 index 6117849bf233b..73839dc3db870 100644 --- 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

tag added by ReactMarkdown + "& pre": { + whiteSpace: "pre-wrap", + wordWrap: "break-word", + }, }, resourcesTableContents: { margin: 0, pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy