How to make React Leaflet Marker popup in right side always?

If this CSS didn't reflect your code. I would recommend for you move it to a global CSS file. to make sure that you override the react-leaflet style. I just updated the class. instead of I used

.leaflet-popup {
      transform: none !important;
      position: absolute !important;
      top: 1px !important;
      bottom: 0px !important;
      right: 0% !important;
      display: flex !important;
      align-items: right !important;
      justify-items: right !important;
    }
    
    .leaflet-container .leaflet-popup-content-wrapper .popup_modle {
      z-index: 1000;
      position: absolute;
      right: 0 !important;
      height: 400px;
      width: 300px;
      top: -1px;
      background-color: rgba(5, 5, 5, 0.7) !important;
      background: linear-gradient(
        60deg,
        rgba(134, 134, 134, 0.7) 0%,
        rgba(0, 0, 0, 0.7) 59%
      ) !important;
      align-items: right !important;
      justify-items: right !important;
      justify-content: right !important;
      -webkit-border-radius: 0 !important;
      -moz-border-radius: 0 !important;
    }

On top that that marker I have added a model to show data.

and the model goes top of the map like this so you can write your own popup.

const [open, setOpen] = React.useState(false);
const [data, setData] = React.useState();

 const handleClose = () => {
    setOpen(false);
  };

  const handleOpen = (datas) => {
    setOpen(true);
    setData(datas);
  };




right-3   text-lightDarkGreen  font-bold top-3"
            id="myModal"
          >
            X 



Name

                {date?.name}
              



                Geographic index
              

                {date?.location?.country_name}, {"  "}
                {date?.location?.city}
              

and css

.popup_modle {
  position: absolute;
  right: 0 !important;
  top: 65px !important;
  height: 400px;
  width: 300px;
  background-color: rgba(5, 5, 5, 0.7) !important;
  background: linear-gradient(
    60deg,
    rgba(134, 134, 134, 0.7) 0%,
    rgba(0, 0, 0, 0.7) 59%
  ) !important;
}