feat(CSS): Add `gl-lg-w-1px` utility class
🤔
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
gl-lg-w-1px
Without
gl-lg-w-1px
With
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.
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:-
GitLab: mr_url -
CustomersDot: mr_url -
Status Page: mr_url
-
- [-] Added the
~"component:*"
label(s) if applicable.
Edited by Peter Hegman