Layout shifts when adding / removing filters on list pages

[AlanGreene]

Describe the bug

The content below the filter shifts up / down slightly (maybe 1 or 2px) as filters are removed / added.

Expected behaviour

Content should be positioned consistently and layout shouldn't shift as I'm using the Dashboard.

Steps to reproduce the bug

• Navigate to https://dashboard.robocat.tekton.dev/#/pipelineruns
• In the same tab, navigate to https://dashboard.robocat.tekton.dev/#/namespaces/tutorial/pipelineruns?labelSelector=tekton.dev%2Fpipeline%3Dtutorial-pipeline (paste into the address bar or click 'tutorial-pipeline' in the Pipeline column)
• Switch back and forth between these pages using the browser back/forward buttons and see the layout shift slightly

Environment details

• Versions:
  • Tekton Dashboard: main

Additional Info

[wingyplus]

I try inspecting this issue. It seems min-height is not enough. After I change from 2px to 4px. The issue is disappear.

[wingyplus]

I see that it use calc(#{$spacing-08} + #{$button-border-width}). If I understand it correctly, button-border-width come from lib carbon which is 2px value, right?. Maybe it doesn't fit with filter tag?

[AlanGreene]

button-border-width come from lib carbon which is 2px value, right?

yes that's right, it's defined here https://github.com/carbon-design-system/carbon/blob/30d28f9e4c87d0494fc2e098dfef6a842adf88d0/packages/components/src/globals/scss/_theme-tokens.scss#L228

[wingyplus]

I guess that because of tag and clear all button is quite bigger. The workaround might increase the min-height offset (~2px) on the tkn--filters can be fixed.

What do you think?

[AlanGreene]

yes that seems reasonable 👍