Skip to content

feat(CSS): Add `gl-lg-w-1px` utility class

Peter Hegman requested to merge peterhegman/add-gl-lg-w-1px-utility-class into main

Why is this needed? 🤔

In GitLab a lot of the time we have a table where the last column are action buttons. Ideally that column would only be the width of the buttons so that the rest of the columns have the maximum amount of space to use. The best way (that I know of) to make a HTML table column the width of the content is to set the width to 1px and then also set white-space: nowrap. See screenshots below for examples

Without gl-lg-w-1px

Screen_Shot_2021-11-05_at_11.34.15_AM

With gl-lg-w-1px

Screen_Shot_2021-11-05_at_11.33.02_AM

Why only set the width to 1px above the lg breakpoint?

When the table stacks it causes issues if the width is explicitly set. In my case the table will stack at the lg breakpoint.

Screen_Shot_2021-11-05_at_11.38.42_AM

Does this MR meet the acceptance criteria?

Conformity

  • Code review guidelines.
  • GitLab UI's contributing guidlines.
  • [-] If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
  • [-] If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
  • [-] If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • [-] Added the ~"component:*" label(s) if applicable.
Edited by Peter Hegman

Merge request reports

Loading