Fix layout issues for speakersgrid and person components.

[matthewgisonno]

Description / Motivation

Fixing layout issues across breakpoints for the SpeakersGrid and Person components.
https://sugcon24eu.vercel.app/Speakers

How Has This Been Tested?

Local dev and storybook

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• I have read the Contributing guide.
• My code/comments/docs fully adhere to the Code of Conduct.
• My change is a code change.
• My change is a documentation change and there are NO other updates required.

[ericsanner]

This check was there to make sure the headline field shows in editor mode, but hides the heading field if the field is empty in regular mode. Otherwise you still have the space from an empty h2 tag.

[matthewgisonno]

@ericsanner good call... I made a change to the whole usage so that it uses the JssText component, which handles the conditional rendering. If the field is empty and it's not pageEditing mode, the tag is not rendered. If the field is empty and it's in pageEditing mode, the tag is rendered so it can be edited.

<Heading as={JssText} field={props.fields.Headline} tag="h2" size="lg" />

That way the logic of showing and hiding the tag is offloaded to the JssText component and the rendering is handled by Chakra Heading component. JssText allows for a field and tag attribute as well, which are implemented here.