Skip to content

fix: Templates table columns width #3731

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 29, 2022
Merged

fix: Templates table columns width #3731

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions site/src/components/TableCellData/TableCellData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,5 +37,8 @@ const useStyles = makeStyles((theme) => ({
secondary: {
fontSize: 12,
color: theme.palette.text.secondary,
lineHeight: "140%",
marginTop: 2,
maxWidth: 540,
},
}))
5 changes: 5 additions & 0 deletions site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. ",
},
],
}

Expand Down
8 changes: 4 additions & 4 deletions site/src/pages/TemplatesPage/TemplatesPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks great, but I wonder if there's a better way than hard-coding a percentage.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've always used hard-coded widths with percentages when working with tables but it is true this doesn't look good. Any suggestions?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The MUI docs didn't give me any good ideas (you can set a cell to "small" but the problem was they were too small, even though the default is "medium", so that wouldn't help), so I think this is fine as long as it looks good in different screen sizes!

<TableCell width="16%">{Language.lastUpdatedLabel}</TableCell>
<TableCell width="16%">{Language.createdByLabel}</TableCell>
<TableCell width="1%"></TableCell>
</TableRow>
</TableHead>
Expand Down