Skip to content

[BUG] Search bar shrinks due to layout shift when switching filter tabs #118

@codewithtamim

Description

@codewithtamim

Bug report

Describe your environment

  • OS name and version: Safari web

Describe the problem

When switching between filter tabs (ALL, BLOCKED, UNBLOCKED), the search bar width changes unexpectedly. Selecting the BLOCKED tab causes the search bar to shrink, creating a visible layout shift in the UI.

Steps to reproduce:

  1. Open the blocklist page containing the search bar and filter tabs.
  2. Observe the default layout while ALL or UNBLOCKED is selected.
  3. Click the BLOCKED filter tab.
  4. Notice that the search bar width becomes smaller.
  5. Switch back to ALL or UNBLOCKED.
  6. Observe that the search bar returns to its original width.

Observed Results:

  • The search bar shrinks when the BLOCKED tab is selected, causing a noticeable horizontal layout shift/jump.

Expected Results:

  • The search bar and filter buttons should maintain consistent sizing and positioning regardless of the selected filter state. No layout shift should occur when switching tabs.

Relevant Code:

Check the images for reference, notice the changes

Image
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions