Fix the Gutenberg edit icons and remove default border from images

[nelsonamaya82]

This SVG style is breaking the Guten blocks edit buttons. I think the SVG size should be limited by the parent element instead. Also there are some cases where we need to use the same SVG in different sizes, even bigger than the 100%.

Also the Tailwind utilities styles were affecting the images in the editor by adding a black border to them. I think images shouldn’t have a border style by default.

[adamf321]

@nelsonamaya82 does GCC have the same problems?

[nelsonamaya82]

@nelsonamaya82 does GCC have the same problems?

Yes @adamf321 I just checked it and it does.

In this case, the More Options button is overlapping the Switch to edit/preview button.

And in this case, it's adding a black solid border to all the images:

[adamf321]

Got it. But shouldn't SVGs have some sort of reset style like IMGs do? I'm pretty sure this change would break GCC in some places.

[nelsonamaya82]

@adamf321 I had not seen any reset in the CSS resetters for SVGs, just for img, and as SVGs can have any size, we should constraint their size with the parent element (or with the SVG code itself).

[adamf321]

I thought the previous code did this, it retrains the SVG size to the container. Without the max width/height it will overflow.