When selecting S Block in filter, little square represents Helium moves to the right

[T410]

• Issue Title: Helium moves to the right when selecting S block in Filtre

• Description: When selecting S Block using the filter (Filtre), the little dot in the filter that represents Helium moves to the right. See the video below. I assume it is because s-block-active.svg and s-block.svg in assets/icons are not aligned. However that Helium block looks misaligned compared to the P Block in both of the svgs.

• Issue URL: Homepage https://periodum.com/

• Steps:

  1. Homepage loads.
  2. Select the S Block using the "filter as block" (Bloğa göre).
  3. Helium block moves to the right.
  4. Deselect the S Block or select another block.
  5. Helium block moves to the original position.

• Expected Result vs. Actual Result:

  • *Expected Result: When the S Block is selected, Helium must not change position
  • *Actual Result: When the S Block is selected, Helium changes position

• Screen Shot/Video:

periodum_filtre_issue.mov

• User Session: Please add the device and browser info you used to encounter the issue:

  • Browser Brand and Version: Google Chrome Version 97.0.4692.99 (Official Build) (x86_64)
  • Operating System and Version/Build Number: macOS Monterey 12.0.1

• Priority Level: Please pick a priority level depending on the impact of the issue:

  • Low: This is just a cosmetic issue that doesn't affect any functionality of Periodum

[T410]

Now that I noticed, every svg of the filter offsets a little bit when clicked