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:

https://github.com/freeCodeCamp/freeCodeCamp/blob/3f92fc66756c3af28be91d2d1db9734d8daf9b36/client/src/templates/Challenges/components/completion-modal.tsx#L204-L206

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):

https://github.com/freeCodeCamp/freeCodeCamp/blob/3f92fc66756c3af28be91d2d1db9734d8daf9b36/client/src/templates/Challenges/classic/show.tsx#L228-L230

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.

https://github.com/freeCodeCamp/freeCodeCamp/pull/54737