From 578c7a5b4c3f576f13f0cf0ecfbfeb79e4b1b0b9 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Mon, 29 Aug 2022 16:09:03 +0000
Subject: [PATCH] fix: Templates table columns width

---
 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 f953766a83ac1..aec8938640ee9 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 f97e94456a026..e45d6cf3906a0 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 78b2dab78375d..00822761a9c21 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>