Meeting-sdk is not responsive in mobile View SDK version:- 2.17.0

[yashkalra088 (Yash)]

Hi,

While I was integrating the web(React) meeting sdk in the mobile view the sdk is not responsive it has desktop view that leads to overflow in the UI.

My sdk integration for this:-

import { ZoomMtg } from "@zoomus/websdk";
import { useParams } from "react-router-dom";


ZoomMtg.setZoomJSLib('https://source.zoom.us/2.17.0/lib', '/av');

ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
// loads language files, also passes any error messages to the ui
ZoomMtg.i18n.load('en-US');
ZoomMtg.i18n.reload('en-US');


const CustomZoom = () => {
  const { id } = useParams();

  var sdkKey = "---sdk-key---";
  var meetingNumber = id;
  // Password is passcode only, if you enter the passcode user should enter directly.
  var passWord = "";
  var registrantToken = "";
  var zakToken = "";
  var leaveUrl = window.location.origin;
  const KJUR = require("jsrsasign");

  function getSignature(e) {
    e.preventDefault();
    const iat = Math.round(new Date().getTime() / 1000) - 30;
    const exp = iat + 60 * 60 * 2;

    const oHeader = { alg: "HS256", typ: "JWT" };

    const oPayload = {
      sdkKey: sdkKey,
      mn: id,
      role: 0,
      iat: iat,
      exp: exp,
      appKey: sdkKey,
      tokenExp: iat + 60 * 60 * 2,
    };

    const sHeader = JSON.stringify(oHeader);
    const sPayload = JSON.stringify(oPayload);
    const signature = KJUR.jws.JWS.sign(
      "HS256",
      sHeader,
      sPayload,
      "---secret-key---"
    );

    startMeeting(signature);
  }

  function startMeeting(signature) {
    document.getElementById("zmmtg-root").style.display = "block";

    ZoomMtg.init({
      leaveUrl: leaveUrl,
      // disablePreview:true,
      success: (success) => {
        ZoomMtg.join({
          signature: signature,
          sdkKey: sdkKey,
          meetingNumber: meetingNumber,
          passWord: passWord,
          userName: `${userData?.name || ''} ${userData.lastName || ''}`,
          userEmail: email || '',
          tk: registrantToken,
          zak: zakToken,
          success: (success) => {
            console.log(success);
          },
          error: (error) => {
            // console.log(error);
          },
        });
      },
      error: (error) => {
        // console.log(error);
      },
    });
  }
  return (
      <main>
        <div>
          <h1>Testing Meeting</h1>
        <button onClick={getSignature}>Join Meeting</button>
        </div>
      </main>

  );
};

export default CustomZoom;

I have bootstrap and react-select links as well in my index.html.

Any solution for this ?
sdk version = 2.17.0
Attaching the screen shot as well:-
https://drive.google.com/drive/folders/1hchWSIvPgxirZqvgLLAdHHFaOxu8pIfQ?usp=sharing