Skip to content

chore(dashboard): adjust prebuild table col width #10564

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
Jun 29, 2022
Merged

chore(dashboard): adjust prebuild table col width #10564

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
4 changes: 2 additions & 2 deletions components/dashboard/src/projects/Prebuilds.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ export default function (props: { project?: Project; isAdminDashboard?: boolean
</div>
<ItemsList className="mt-2">
<Item header={true}>
<ItemField className="my-auto w-5/12">
<ItemField className="my-auto md:w-3/12 xl:w-4/12">
Copy link
Member

Choose a reason for hiding this comment

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

It would be great to not overshoot at md.

Copy link
Contributor

Choose a reason for hiding this comment

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

Tip for the future: Using CSS grid is much more powerful and robust in these situation than trying to guess good fixed widths.

With grid, you can simply specify "I want three columns of exactly the same width", or specify custom relative column widths, but they'll almost always be correct regardless of screen size, margins, size of content, etc.

<span>Prebuild</span>
</ItemField>
<ItemField className="my-auto w-5/12">
Expand All @@ -216,7 +216,7 @@ export default function (props: { project?: Project; isAdminDashboard?: boolean
>
<Item key={`prebuild-${p.info.id}`}>
<ItemField
className={`flex items-center my-auto w-5/12 ${
className={`flex items-center my-auto md:w-3/12 xl:w-4/12 ${
props.isAdminDashboard ? "pointer-events-none" : ""
}`}
>
Expand Down