I have a MobileView component that uses the DaisyUI phone mockup to display a Home component within a mobile device frame:

<div className="mockup-phone">
  <div className="camera"></div>
  <div className="display">
    <div className="artboard artboard-demo phone-1">
      <Home />
    </div>
  </div>
</div>

Inside the Home component, I use different viewports (sm, md, lg) to control the layout. However, when this mockup is displayed on a desktop view, the Home component still shows its desktop layout, instead of switching to mobile view. The layout changes correctly when the viewport is adjusted to mobile size.

How can I ensure that the Home component adapts to mobile layout when viewed inside the phone mockup, without modifying the Home component itself? If modifying the Home component is the only solution, I am open to that as well.

I tried something like this, but no luck.

<div
  className="mockup-phone"
  style={{
    height: "800px",
    width: "400px",
  }}
>
  <div
    className="camera"
    style={{
      height: "100%",
      width: "100%",
      overflow: "hidden",
      position: "relative",
    }}
  ></div>
  <div className="display">
    <div
      className="artboard artboard-demo phone-1"
      style={{
        height: "100%",
        width: "100%",
        overflowY: "auto",
        overflowX: "hidden",
      }}
    >
      Hi.
    </div>
  </div>
</div>