React Leaflet Popup does not fit the screen completely

I'm trying to fit the opened tooltip to the frame I set on the screen. I want it to be dynamic according to the framework I put instead of making it static, but I couldn't. Thank you for your help in advance

There is my map component : I'm getting the coordinates from a fake data and trying to show a devexpress line chart component that I've plotted in a popup

import React from 'react';
import Leaflet from 'leaflet';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

import { MapWithPopupdata } from './fakeData';
import { RootMapWithPopupData } from 'types/Map';
import { Container } from 'reactstrap';
import LineChart from 'components/Charts/Line/LineChart';

Leaflet.Icon.Default.imagePath = '../node_modules/leaflet';

delete Leaflet.Icon.Default.prototype._getIconUrl;

Leaflet.Icon.Default.mergeOptions({
  iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',
  shadowUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png',
});

type DefaultMapWithPopupProps = {
  // dataSource: RootMapWithPopupData;
};
const MapWithPopup = () => {
  console.log('mapcomp');

  return (
    <MapContainer
      center={[41.00824, 28.978359]}
      zoom={8}
      scrollWheelZoom={false}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {MapWithPopupdata.data?.map((atm: any, index) => {
        return (
          <Marker key={index} position={[atm.latitude, atm.longitude]}>
            <Popup maxWidth="100%" maxHeight="auto">
              {atm.name}
              <br />
              {atm.id}

              <LineChart
                dataSource={atm.info1}
                argumentField="country"
                subtitle="line Chart"
                title="Line Chart Title"
              />
            </Popup>
          </Marker>
        );
      })}
    </MapContainer>
  );
};

export default MapWithPopup;

This is extra css i wrote

.leaflet-container {
  height: 100%;
}
.leaflet-popup-content-wrapper {
  width: 600px;
  height: 100%;
}

.dx-visibility-change-handler {
  width: 100%;
}
.leaflet-popup-content {
  width: 90%;
}

And i called component

<Row>
            <Col lg="8">
              <Card>
                <CardBody>
                  <h4 className="card-title mb-4">Working with popups</h4>
                  <div id="leaflet-map-popup" className="leaflet-map">
                    <MapWithPopup />
                  </div>
                </CardBody>
              </Card>
            </Col>
          </Row>