From de65a609282beaead4a4422129821e825353c982 Mon Sep 17 00:00:00 2001 From: Abhineet Jain Date: Tue, 21 Jun 2022 19:56:25 +0000 Subject: [PATCH] wrap code text in template readmes --- .../TemplatePage/TemplatePageView.stories.tsx | 14 +++++++++++++- site/src/pages/TemplatePage/TemplatePageView.tsx | 6 ++++++ 2 files changed, 19 insertions(+), 1 deletion(-) 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