Hidden phx-classes messing with CSS?

Why are classes like “phx-connected” applied behind the scenes with no references to the CSS properties they have?

Is there a list anywhere that details all the random classes that can be added behind the scenes and under which circumstances? It would be nice to know in advance before wasting time. Just spent about 10 minutes try to figure out why I couldn’t set a width to 100%, only to find out it was being restriced by “phx-connected” which has no CSS properties that I can find.

If I create the phx-connected class and change the width to 100% I can fix my current problem, but what happens later when phx-connected gets added to an object whose width or other properties I don’t want to be the same?

Is phx-connected applied to every socket connection, and if so should I be treating it as my entire pages container to be safe? I also had a phx-class messing with my spacing on a text-area yesterday.

Any info on how I’m meant to deal with this is appreciated.

Edit:

I forgot to add, if they are adding hidden classes, why not set the heights and widths to something like inherit? At least then if someone isn’t aware it exists, it will take the properties of its parent.