Add margin to prevent "Clear all btn" from moving fix #2062

[yamaken1343]

Changes

fix #2062

The "filter" has .bx--tag class and the "Clear All button" has .bx--btn class.
.bx--tag class has margin but .bx--btn class has not margin. So, there was a gap between when there was a "filter" on the left and when there was no "filter".

I add margin to .bx--btn class to prevent "Clear all button" from moving.

Submitter Checklist

These are the criteria that every PR should meet, please check them off as you
review them:

• Includes tests (if functionality changed/added)
• Includes docs (if user facing)
• Commit messages follow commit message best practices

See the contribution guide
for more details.

[tekton-robot]

Hi @yamaken1343. Thanks for your PR.

I'm waiting for a tektoncd member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[AlanGreene]

Thanks for the PR @yamaken1343. It looks like this change pushes the button too far down when there is a tag displayed to the left of it.

Instead of the 16px margin top which we add to the tags, it looks like the button only needs about 11px (due to different height of the button vs. tag). If there's a way to achieve this without hardcoding the 11px value that would be preferred, but if not we can hardcode it for now.

/ok-to-test

[yamaken1343]

Tag height is 1.5rem and tag margin is 1rem. Btn height is 2rem. So btn margin should be 0.75rem correct.

But 0.75rem is 12px, not 11px.
So I'm subtracting 1px.

[AlanGreene]

Thanks @yamaken1343, this looks good.

/lgtm

[tekton-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: AlanGreene

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [AlanGreene]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[yamaken1343]

Thank you for review!