modal getting stuck inside parent div on mobile devices - php

Question

I am having some trouble with a modal that seems to get stuck inside its parent div on mobile devices only, I have replicated this code onto a blank html to make sure nothing was conflicting with it and then accessed it on mobile but still the modal appears inside the "slider" div, but on PC it shows up fine, not inside the slider div.
The issue is that I cant move the modal code outside of the slider div since it needs to remain within the foreach statement (Please refer to my JSFiddle)
Some background: the <div class="slider"> contains a foreach statement and for each item that has been previously purchased in the users account will appear as a <div class="slide"></div> which has a button for a popup modal that has the id set as the order ID from the database for that particular item (hence why I cant move the modal outside of the slider div)
This is the slider on mobile
This is when the modal is open (Inside the slider div)
JSFiddle
<!-- slider div --->
<div class="slider">
<!-- FOREACH EXAMPLE
$squirtle = $dbh->prepare("SELECT * FROM `orders` WHERE `userID` = '$userID' ORDER BY `date` DESC");
$squirtle->execute();
$onyx = $squirtle->fetchAll();
if (count($onyx) == '0'){
echo ('<p style="margin-left:24px;"><small>No purchases..</small></p>');
} else {
foreach ($onyx as $ditto) {
--->
<!-- EACH SLIDE --->
<div class="slide" id="slide" style="margin-left:24px;">
<img src="/images/products/<?php echo $ditto['prodimage']; ?>" style="width:80px;">
<!-- Modal Button -->
<i style="vertical-align:top;color:#888;" data-toggle="modal" data-target="#exampleModal" class="fas fa-ellipsis-v"></i>
</div>
<!-- --- --->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" style="margin-top:64px;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Order options</h5>
</div>
<div class="modal-body" style="height:140px;">
<img src="/images/products/<?php echo $ditto['prodimage']; ?>" style="width:82px;margin-top:0;margin-right:24px;float:right;">
View Progress
</div>
<div class="modal-footer">
<button style="background-color:#0d6efd;" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--
}}
-->
</div>
and my CSS..
.slider {
width: 100%;
padding: 6px 0px;
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
.slider::-webkit-scrollbar {
display: none;
}
.slide {
width: 140px;
flex-shrink: 0;
height: 100%;
}
.slider, .slide {
scroll-snap-align:start;
}
.slider img {
margin: 6px 6px;
}
#media(max-width:768px){
.modal{
z-index:99999 !important;
position:absolute !important;
top:0 !important;
}
}
.modal {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
z-index: 99999 !important;
display: none;
width: 100%;
height: 100%;
overflow-x: hidden !important;
overflow-y: auto !important;
outline: 0;
background-color: rgba(10, 10, 10, 0.45);
}
.modal-backdrop {
display: none !important;
}
.modal-content {
color: black !important;
z-index: 99999 !important;
position: relative;
display: block;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: .3rem;
outline: 0;
}
i.fa-ellipsis-v {
border-radius: 60px;
box-shadow: 0 0 2px #888;
padding: 0.5em 0.6em;
font-size: 14px;
}
i.fa-ellipsis-v:hover {
cursor: pointer;
}