Replace hidden-xs class with an isMobile check

[huyenltnguyen]

Description

We are using the hidden-xs class to conditionally hide some text on mobile screens:

freeCodeCamp/client/src/templates/Challenges/components/completion-modal.tsx

Lines 204 to 206 in 3f92fc6

	<span className='hidden-xs'>
	{isMacOS ? ' (Command + Enter)' : ' (Ctrl + Enter)'}
	</span>

This class comes from Bootstrap, which is something we are going to remove (#52030). So instead of using the class, we can use an isMobile check, like this (which is also a little more consistent with how we've handled this kind of conditional rendering):

freeCodeCamp/client/src/templates/Challenges/classic/show.tsx

Lines 228 to 230 in 3f92fc6

	const isMobile = useMediaQuery({
	query: `(max-width: ${MAX_MOBILE_WIDTH}px)`
	});

Requirements

Update the completion-modal file to replace the hidden-xs class with an isMobile check.

Notes

I noticed that we are using multiple methods for mobile device detection, so I think the check should be standardized, and there should be a shared util for this check. But I'm leaving this out of the scope of this issue, and will create a separate issue for it.

[camperbot]

We typically do not assign issues. Instead, we accept the first pull request that comprehensively solves the issue.

Issues labelled with help wanted or first timers only are open for contributions.

Please make sure you read our guidelines for contributing. We prioritize contributors following the instructions in our guide. Join us in our chat room or the forum if you need help contributing - our community will be happy to assist you.

[a2937]

@huyenltnguyen I already have a pull request that technically resolves this. While it is done the same way we did the lower-jaw i.e checks for a desktop instead of being mobile , it does solve the problem and pass the tests.

#54737