Configurable product with bad behavior in front end

[mariamghalleb]

Preconditions

1. php 7.3
2. Magento 2.4

Steps to reproduce

1. Create a configurable product that has different configurations, which are a variation of 4 dropdown attributes and one color swatch attribute

Expected result

1. A Configurable product that works fine.

Actual result

In front end, the configurable product acts weird: the prices of each simple product don't show, the width of the dropdowns is different, the space between the elements is messed up, the " * " that say required are messing, the selects of the dropdowns are considered as "swatch-select" instead of super attributes with no IDs. As shown in these screenshots:

Please note that when i took off the attribute that has the color swatch, the configurable product was fixed and its behavior was normal as shown in this last screenshot