I can’t preview pdfs on the web (mobile device)

I have a floating div in which I have a working PDF preview on the left and a form with the data on the right.

My problem occurs when I want to preview that PDF from a mobile device, the previewer shows the message:

<p>This browser does not support PDFs. Please download the PDF to view it: </p>

and I have preferred that on mobile phones a button be added to open the PDF in another window. and here come my two problems:

  1. the huge space that remains between the button and the form, I don’t know how I can remove it, I have tried to hide the preview and there is still not much space.
  2. the function of the button works almost 100% since it automatically downloads the document, when I only look for it to be previewed, not download it locally.

This is my code:

CSS

<style>
    @media (max-width: 1200px) {
        .preview-container {
            width: 100%;
            height: auto;
            margin-bottom: 20px;
        }

        .row > div {
            flex: 0 0 100%;
            max-width: 100%;
        }

        .file-preview, .embed-container {
            display: none; /* Hide the file preview in small screens */
        }

        .open-btn {
            display: block !important; /* Show the open button in small screens */
        }
    }

    @media (min-width: 1200px) {
        .open-btn {
            display: none !important; /* Hide the open button in large screens */
        }

        .file-preview, .em {
            display: block; /* Show the file preview in large screens */
        }
    }

    .embed-container {
        width: 100%;
        height: 100%;
    }

    .open-btn {
        width: 100%;
        height: 50px;
        margin-top: 10px;
        font-size: 16px;
    }
</style>

HTML and PHP

<div class="modal-body">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 h-600px px-5  preview-container"> <!-- <div class="col-md-6 h-600px px-5 d-none d-xl-block"> -->
                <!-- Container for the Embed  -->
                <?php
                $ext = pathinfo($resultp['name'], PATHINFO_EXTENSION);
                $filePath = '../../../../files' . $resultp['path'] . '/' . $resultp['name'];
                switch ($ext) {
                    case 'pdf':
                        echo '<div class="embed-container file-preview">
                            <object data="' . $filePath . '#toolbar=0" type="application/pdf" width="100%" height="100%">
                                <p>This browser does not support PDFs. Please download the PDF to view it: </p>
                            </object>
                        </div>';
                        echo '<button class="btn btn-primary open-btn" data-url="' . $filePath . '">Open PDF</button>';
                        break;
                        <!--more code-->
            </div>
            <div class="col-md-6 col-12 h-600px px-5"> <!-- <div class="col-md-6"> -->
                <form action="<?= site_url('search/updateFile'); ?>" method="POST" accept-charset="UTF-8" id="updateFile" onsubmit="saveChanges.disabled = true; return true;">
                    <?= csrf_field() ?>
                        <!--form code-->
                </form>
            </div>
        </div>
    </div>
</div>

JavaScript

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const openBtns = document.querySelectorAll('.open-btn');

        openBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const url = this.getAttribute('data-url');
                const win = window.open(url, '_blank', 'width=800,height=600,scrollbars=yes');
                win.focus();
            });
        });
    });
</script>

This is what the window currently looks like.

Preview Window