From 62f686c003e290f89d46a04e53230aa904bff41e Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Mon, 29 Aug 2022 14:49:04 -0300
Subject: [PATCH] fix: Templates table columns width (#3731)

---
 site/src/components/TableCellData/TableCellData.tsx       | 3 +++
 .../src/pages/TemplatesPage/TemplatesPageView.stories.tsx | 5 +++++
 site/src/pages/TemplatesPage/TemplatesPageView.tsx        | 8 ++++----
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/site/src/components/TableCellData/TableCellData.tsx b/site/src/components/TableCellData/TableCellData.tsx
index f953766a83..aec8938640 100644
--- a/site/src/components/TableCellData/TableCellData.tsx
+++ b/site/src/components/TableCellData/TableCellData.tsx
@@ -37,5 +37,8 @@ const useStyles = makeStyles((theme) => ({
   secondary: {
     fontSize: 12,
     color: theme.palette.text.secondary,
+    lineHeight: "140%",
+    marginTop: 2,
+    maxWidth: 540,
   },
 }))
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx
index f97e94456a..e45d6cf390 100644
--- a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx
@@ -25,6 +25,11 @@ AllStates.args = {
       description: "😮 Wow, this one has a bunch of usage!",
       icon: "",
     },
+    {
+      ...MockTemplate,
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
+    },
   ],
 }
 
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
index 78b2dab783..00822761a9 100644
--- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -115,10 +115,10 @@ export const TemplatesPageView: FC<React.PropsWithChildren<TemplatesPageViewProp
         <Table>
           <TableHead>
             <TableRow>
-              <TableCell>{Language.nameLabel}</TableCell>
-              <TableCell>{Language.usedByLabel}</TableCell>
-              <TableCell>{Language.lastUpdatedLabel}</TableCell>
-              <TableCell>{Language.createdByLabel}</TableCell>
+              <TableCell width="50%">{Language.nameLabel}</TableCell>
+              <TableCell width="16%">{Language.usedByLabel}</TableCell>
+              <TableCell width="16%">{Language.lastUpdatedLabel}</TableCell>
+              <TableCell width="16%">{Language.createdByLabel}</TableCell>
               <TableCell width="1%"></TableCell>
             </TableRow>
           </TableHead>