How do I provide the same UI in desktop and mobile devices in a React PWA using MUI?

I created a React PWA using the PWA template and using MaterialUI

npx create-react-app my-pwa –template cra-template-pwa-typescript

But on mobile devices in Chrome Dev the TextFields are touching the sides.

I’ve tried the suggestions on line and using copilot.

One suggestion was to add the following style to the containing div.

Here’s the css

@media (max-width: 600px) {
.loginFormContainer {
    background-image: url('./../../assets/images/login-image.jpeg'); /* Adjust the path as needed */
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .formWrapper {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 10px;
  }
}

And here’s a Stack post I’ve looked at but it doesn’t say in which file to make the change

Separated Design between Desktop and Mobile in React.js PWA

I simply want the same UI experience on a browser and on mobile devices but none of the recommended suggestions from CoPilot, Stack or Google has worked.

Here’s the actual tsx

 return (
    <div className={styles.loginFormContainer}>
      <form
        onSubmit={handleSubmit(onSubmit)}
        noValidate
      >
        <div>
          <TextField
            required
            data-testid="email"
            type="text"
            id="email"
            label="Email"
            style={{ width: 400 }}
            placeholder={EMAIL_PLACEHOLDER}
            {...register("email", {
              pattern: {
                value:
                  /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,
                message: EMAIL_INVALID,
              },
              required: {
                value: true,
                message: EMAIL_REQUIRED,
              },
            })}
            sx={{
              backgroundColor: 'white',
            }}
          />
          <p className="error" data-testid="emailErr">
            {errors.email?.message}
          </p>
        </div>
        <div>
          <TextField
            data-testid="password"
            type="password"
            id="password"
            required
            label="Password"
            style={{ width: 400 }}
            placeholder={PASSWORD_PLACEHOLDER}
            {...register("password", {
              required: {
                value: true,
                message: PASSWORD_REQUIRED,
              },
              minLength: {
                value: 10,
                message: PASSWORD_VALIDATION,
              },
            })}
            sx={{
              backgroundColor: 'white',
            }}
          />
          <p className="error" data-testid="passErr">{errors.password?.message}</p>
        </div>
        <div>
          <p style={{ color: 'white' }}>
            Don't have an account? <Link to="/Register">Register here</Link>
          </p>
        </div>
        <div className="w-100 text-center mt-2">
          <p style={{ color: 'white' }}>
            Forgot your password? click here to <Link to="/reset">Reset</Link>
          </p>
        </div>
        <Button type="submit" data-testid="login-button" variant="contained">
          Submit
        </Button>
      </form>
    </div>
  );

What’s the correct way to do this?

Any help would be appreciated.

You need to sign in to view this answers

Related Post