From f6141b0047dfdc03a76f3ca80819feed95a515d5 Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Thu, 20 Feb 2025 21:11:43 -0500
Subject: [PATCH] center and fit modal

---
 .../centerpiece/20230108_112718.jpg}.txt      |   2 +-
 gallery/centerpiece/index.html                | 112 +++++++++++-------
 gallery/centerpiece/updateGallery.sh          | 104 +++++++++-------
 gallery/classic/index.html                    |  52 ++++++--
 gallery/classic/updateGallery.sh              |  39 ++++--
 gallery/organic/index.html                    |  56 +++++++--
 gallery/organic/updateGallery.sh              |  41 +++++--
 gallery/sculpture/index.html                  |  48 ++++++--
 gallery/sculpture/updateGallery.sh            |  41 +++++--
 9 files changed, 343 insertions(+), 152 deletions(-)
diff --git a/assets/pics/gallery/centerpiece/20230108_112718.jpg}.txt b/assets/pics/gallery/centerpiece/20230108_112718.jpg}.txt
index 8b13789..11613ce 100644
--- a/assets/pics/gallery/centerpiece/20230108_112718.jpg}.txt
+++ b/assets/pics/gallery/centerpiece/20230108_112718.jpg}.txt
@@ -1 +1 @@
-
+Cocktail Arrangements
diff --git a/gallery/centerpiece/index.html b/gallery/centerpiece/index.html
index f494642..4da8d92 100644
--- a/gallery/centerpiece/index.html
+++ b/gallery/centerpiece/index.html
@@ -56,16 +56,25 @@
 
         }
         .modal-image {
-            max-width: 90vw;
-            max-height: 90vh;
-            display: block;
-            margin: 0 auto;
-            border-radius: 10px;
-            max-width: 90vw;
-              max-height: 90vh;
-            overflow: clip;
+        width: auto;
+    height: auto;
+    max-width: 90vw;
+    max-height: 90vh;
+    object-fit: contain; /* Ensures the whole image is visible without cropping */
+    display: block;
         }
-
+.modal-card {
+    width: auto;
+    max-width: 90vw; /* Ensures the modal is responsive */
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: transparent; /* Keeps the background consistent */
+    overflow: hidden;
+    
+    }
         .modal-content {
             overflow-y: none;
             max-height: 95vh;
@@ -77,8 +86,18 @@
             background-color: transparent !important;
         }
         .modal-card-body{
-          overflow: clip !important;
+             display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
           }
+          body.modal-open {
+    overflow: hidden;
+}
+.delete{
+margin-left: 10px;}
     </style>
 </head>
 <body>
@@ -120,19 +139,19 @@
             <div class="gallery">
                 <div class="gallery-item">
                     <figure class="image is-square">
-                        <img loading=lazy src="../../assets/pics/gallery/centerpiece/20230108_112718.jpg}.webp" alt="" data-target="modal1" aria-haspopup="true">
+                        <img loading=lazy src="../../assets/pics/gallery/centerpiece/20230108_112718.jpg}.webp" alt="Cocktail Arrangements" data-target="modal1" aria-haspopup="true">
                     </figure>
-                    <p class="caption"></p>
+                    <p class="caption">Cocktail Arrangements</p>
                 </div>
                 <div class="modal" id="modal1">
                     <div class="modal-background"></div>
                     <div class="modal-card">
                         <header class="modal-card-head">
-                            <p class="modal-card-title has-size-4"></p>
+                            <p class="modal-card-title has-size-4">Cocktail Arrangements</p>
                             <button class="delete" aria-label="close" data-action="close"></button>
                         </header>
                         <section class="modal-card-body">
-                            <img class="modal-image" src="../../assets/pics/gallery/centerpiece/20230108_112718.jpg}.webp" alt="">
+                            <img class="modal-image" src="../../assets/pics/gallery/centerpiece/20230108_112718.jpg}.webp" alt="Cocktail Arrangements">
                         </section>
                     </div>
                 </div>
@@ -141,40 +160,43 @@
     </section>
 
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            function openModal(modalId) {
-                const modal = document.getElementById(modalId);
-                modal.classList.add('is-active');
-            }
+document.addEventListener('DOMContentLoaded', () => {
+    function openModal(modalId) {
+        const modal = document.getElementById(modalId);
+        modal.classList.add('is-active');
+        document.body.classList.add('modal-open'); // Prevent background scroll
+    }
 
-            function closeModal(modal) {
-                modal.classList.remove('is-active');
-            }
+    function closeModal(modal) {
+        modal.classList.remove('is-active');
+        document.body.classList.remove('modal-open'); // Allow scrolling again
+    }
 
-            const images = document.querySelectorAll('.gallery img');
-            images.forEach(image => {
-                image.addEventListener('click', () => {
-                    const targetModal = image.dataset.target;
-                    openModal(targetModal);
-                });
-            });
-
-            const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
-            closeButtons.forEach(button => {
-                button.addEventListener('click', () => {
-                    const modal = button.closest('.modal');
-                    closeModal(modal);
-                });
-            });
-
-            const modalBackgrounds = document.querySelectorAll('.modal-background');
-            modalBackgrounds.forEach(background => {
-                background.addEventListener('click', () => {
-                    const modal = background.closest('.modal');
-                    closeModal(modal);
-                });
-            });
+    const images = document.querySelectorAll('.gallery img');
+    images.forEach(image => {
+        image.addEventListener('click', () => {
+            const targetModal = image.dataset.target;
+            openModal(targetModal);
         });
+    });
+
+    const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
+    closeButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            const modal = button.closest('.modal');
+            closeModal(modal);
+        });
+    });
+
+    const modalBackgrounds = document.querySelectorAll('.modal-background');
+    modalBackgrounds.forEach(background => {
+        background.addEventListener('click', () => {
+            const modal = background.closest('.modal');
+            closeModal(modal);
+        });
+    });
+});
+
     </script>
         <footer class="footer has-background-primary-light">
       <div class="content has-text-centered">
diff --git a/gallery/centerpiece/updateGallery.sh b/gallery/centerpiece/updateGallery.sh
index b2f1661..fbe80fc 100755
--- a/gallery/centerpiece/updateGallery.sh
+++ b/gallery/centerpiece/updateGallery.sh
@@ -71,16 +71,25 @@ cat > "$OUTPUT_FILE" <<EOL
 
         }
         .modal-image {
-            max-width: 90vw;
-            max-height: 90vh;
-            display: block;
-            margin: 0 auto;
-            border-radius: 10px;
-            max-width: 90vw;
-              max-height: 90vh;
-            overflow: clip;
+        width: auto;
+    height: auto;
+    max-width: 90vw;
+    max-height: 90vh;
+    object-fit: contain; /* Ensures the whole image is visible without cropping */
+    display: block;
         }
-
+.modal-card {
+    width: auto;
+    max-width: 90vw; /* Ensures the modal is responsive */
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: transparent; /* Keeps the background consistent */
+    overflow: hidden;
+    
+    }
         .modal-content {
             overflow-y: none;
             max-height: 95vh;
@@ -92,8 +101,18 @@ cat > "$OUTPUT_FILE" <<EOL
             background-color: transparent !important;
         }
         .modal-card-body{
-          overflow: clip !important;
+             display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
           }
+          body.modal-open {
+    overflow: hidden;
+}
+.delete{
+margin-left: 10px;}
     </style>
 </head>
 <body>
@@ -178,40 +197,43 @@ cat >> "$OUTPUT_FILE" <<EOL
     </section>
 
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            function openModal(modalId) {
-                const modal = document.getElementById(modalId);
-                modal.classList.add('is-active');
-            }
+document.addEventListener('DOMContentLoaded', () => {
+    function openModal(modalId) {
+        const modal = document.getElementById(modalId);
+        modal.classList.add('is-active');
+        document.body.classList.add('modal-open'); // Prevent background scroll
+    }
 
-            function closeModal(modal) {
-                modal.classList.remove('is-active');
-            }
+    function closeModal(modal) {
+        modal.classList.remove('is-active');
+        document.body.classList.remove('modal-open'); // Allow scrolling again
+    }
 
-            const images = document.querySelectorAll('.gallery img');
-            images.forEach(image => {
-                image.addEventListener('click', () => {
-                    const targetModal = image.dataset.target;
-                    openModal(targetModal);
-                });
-            });
-
-            const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
-            closeButtons.forEach(button => {
-                button.addEventListener('click', () => {
-                    const modal = button.closest('.modal');
-                    closeModal(modal);
-                });
-            });
-
-            const modalBackgrounds = document.querySelectorAll('.modal-background');
-            modalBackgrounds.forEach(background => {
-                background.addEventListener('click', () => {
-                    const modal = background.closest('.modal');
-                    closeModal(modal);
-                });
-            });
+    const images = document.querySelectorAll('.gallery img');
+    images.forEach(image => {
+        image.addEventListener('click', () => {
+            const targetModal = image.dataset.target;
+            openModal(targetModal);
         });
+    });
+
+    const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
+    closeButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            const modal = button.closest('.modal');
+            closeModal(modal);
+        });
+    });
+
+    const modalBackgrounds = document.querySelectorAll('.modal-background');
+    modalBackgrounds.forEach(background => {
+        background.addEventListener('click', () => {
+            const modal = background.closest('.modal');
+            closeModal(modal);
+        });
+    });
+});
+
     </script>
         <footer class="footer has-background-primary-light">
       <div class="content has-text-centered">
diff --git a/gallery/classic/index.html b/gallery/classic/index.html
index c41d4af..1aa96f7 100644
--- a/gallery/classic/index.html
+++ b/gallery/classic/index.html
@@ -18,7 +18,7 @@
 <link rel="stylesheet" href="../../style.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <style>
-        .gallery {
+ .gallery {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
             gap: 15px;
@@ -50,16 +50,33 @@
             font-family: 'Autour One', cursive;
         }
 
-        .modal-image {
-            max-width: 90%;
-            max-height: 90vh;
-            display: block;
-            margin: 0 auto;
-            border-radius: 10px;
-        }
+          .modal{
+        --bulma-modal-content-width: 95vw;
+        --bulma-modal-content-height: 95vh;
 
+        }
+        .modal-image {
+        width: auto;
+    height: auto;
+    max-width: 90vw;
+    max-height: 90vh;
+    object-fit: contain; /* Ensures the whole image is visible without cropping */
+    display: block;
+        }
+.modal-card {
+    width: auto;
+    max-width: 90vw; /* Ensures the modal is responsive */
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: transparent; /* Keeps the background consistent */
+    overflow: hidden;
+    
+    }
         .modal-content {
-            overflow-y: auto;
+            overflow-y: none;
             max-height: 95vh;
             background-color: transparent !important;
         }
@@ -68,6 +85,19 @@
             font-family: 'Autour One', cursive;
             background-color: transparent !important;
         }
+        .modal-card-body{
+             display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
+          }
+          body.modal-open {
+    overflow: hidden;
+}
+.delete{
+margin-left: 10px;}
     </style>
 </head>
 <body>
@@ -109,7 +139,7 @@
             <div class="gallery">
                 <div class="gallery-item">
                     <figure class="image is-square">
-                        <img src="../../assets/pics/gallery/classic/20230617_131551.webp" alt="20' Classic Arch" data-target="modal1" aria-haspopup="true">
+                        <img loading=lazy src="../../assets/pics/gallery/classic/20230617_131551.webp" alt="20' Classic Arch" data-target="modal1" aria-haspopup="true">
                     </figure>
                     <p class="caption">20' Classic Arch</p>
                 </div>
@@ -127,7 +157,7 @@
                 </div>
                 <div class="gallery-item">
                     <figure class="image is-square">
-                        <img src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" alt="Classic Columns" data-target="modal2" aria-haspopup="true">
+                        <img loading=lazy src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" alt="Classic Columns" data-target="modal2" aria-haspopup="true">
                     </figure>
                     <p class="caption">Classic Columns</p>
                 </div>
diff --git a/gallery/classic/updateGallery.sh b/gallery/classic/updateGallery.sh
index e1be888..53b9330 100755
--- a/gallery/classic/updateGallery.sh
+++ b/gallery/classic/updateGallery.sh
@@ -71,16 +71,25 @@ cat > "$OUTPUT_FILE" <<EOL
 
         }
         .modal-image {
-            max-width: 90vw;
-            max-height: 90vh;
-            display: block;
-            margin: 0 auto;
-            border-radius: 10px;
-            max-width: 90vw;
-              max-height: 90vh;
-            overflow: clip;
+        width: auto;
+    height: auto;
+    max-width: 90vw;
+    max-height: 90vh;
+    object-fit: contain; /* Ensures the whole image is visible without cropping */
+    display: block;
         }
-
+.modal-card {
+    width: auto;
+    max-width: 90vw; /* Ensures the modal is responsive */
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: transparent; /* Keeps the background consistent */
+    overflow: hidden;
+    
+    }
         .modal-content {
             overflow-y: none;
             max-height: 95vh;
@@ -92,8 +101,18 @@ cat > "$OUTPUT_FILE" <<EOL
             background-color: transparent !important;
         }
         .modal-card-body{
-          overflow: clip !important;
+             display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
           }
+          body.modal-open {
+    overflow: hidden;
+}
+.delete{
+margin-left: 10px;}
     </style>
 </head>
 <body>
diff --git a/gallery/organic/index.html b/gallery/organic/index.html
index 9900069..ce7b41f 100644
--- a/gallery/organic/index.html
+++ b/gallery/organic/index.html
@@ -18,7 +18,7 @@
 <link rel="stylesheet" href="../../style.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <style>
-        .gallery {
+ .gallery {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
             gap: 15px;
@@ -50,16 +50,33 @@
             font-family: 'Autour One', cursive;
         }
 
-        .modal-image {
-            max-width: 90%;
-            max-height: 90vh;
-            display: block;
-            margin: 0 auto;
-            border-radius: 10px;
-        }
+          .modal{
+        --bulma-modal-content-width: 95vw;
+        --bulma-modal-content-height: 95vh;
 
+        }
+        .modal-image {
+        width: auto;
+    height: auto;
+    max-width: 90vw;
+    max-height: 90vh;
+    object-fit: contain; /* Ensures the whole image is visible without cropping */
+    display: block;
+        }
+.modal-card {
+    width: auto;
+    max-width: 90vw; /* Ensures the modal is responsive */
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: transparent; /* Keeps the background consistent */
+    overflow: hidden;
+    
+    }
         .modal-content {
-            overflow-y: auto;
+            overflow-y: none;
             max-height: 95vh;
             background-color: transparent !important;
         }
@@ -68,6 +85,19 @@
             font-family: 'Autour One', cursive;
             background-color: transparent !important;
         }
+        .modal-card-body{
+             display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
+          }
+          body.modal-open {
+    overflow: hidden;
+}
+.delete{
+margin-left: 10px;}
     </style>
 </head>
 <body>
@@ -110,7 +140,7 @@
             <div class="gallery">
                 <div class="gallery-item">
                     <figure class="image is-square">
-                        <img src="../../assets/pics/gallery/organic/20241121_200047~2.jpg" alt="" data-target="modal1" aria-haspopup="true">
+                        <img loading=lazy src="../../assets/pics/gallery/organic/20241121_200047~2.jpg" alt="" data-target="modal1" aria-haspopup="true">
                     </figure>
                     <p class="caption"></p>
                 </div>
@@ -118,7 +148,7 @@
                     <div class="modal-background"></div>
                     <div class="modal-card">
                         <header class="modal-card-head">
-                            <p class="modal-card-title"></p>
+                            <p class="modal-card-title has-size-4"></p>
                             <button class="delete" aria-label="close" data-action="close"></button>
                         </header>
                         <section class="modal-card-body">
@@ -128,7 +158,7 @@
                 </div>
                 <div class="gallery-item">
                     <figure class="image is-square">
-                        <img src="../../assets/pics/gallery/organic/20250202_133930~2.jpg" alt="" data-target="modal2" aria-haspopup="true">
+                        <img loading=lazy src="../../assets/pics/gallery/organic/20250202_133930~2.jpg" alt="" data-target="modal2" aria-haspopup="true">
                     </figure>
                     <p class="caption"></p>
                 </div>
@@ -136,7 +166,7 @@
                     <div class="modal-background"></div>
                     <div class="modal-card">
                         <header class="modal-card-head">
-                            <p class="modal-card-title"></p>
+                            <p class="modal-card-title has-size-4"></p>
                             <button class="delete" aria-label="close" data-action="close"></button>
                         </header>
                         <section class="modal-card-body">
diff --git a/gallery/organic/updateGallery.sh b/gallery/organic/updateGallery.sh
index ff90fff..27cf023 100755
--- a/gallery/organic/updateGallery.sh
+++ b/gallery/organic/updateGallery.sh
@@ -71,16 +71,25 @@ cat > "$OUTPUT_FILE" <<EOL
 
         }
         .modal-image {
-            max-width: 90vw;
-            max-height: 90vh;
-            display: block;
-            margin: 0 auto;
-            border-radius: 10px;
-            max-width: 90vw;
-              max-height: 90vh;
-            overflow: clip;
+        width: auto;
+    height: auto;
+    max-width: 90vw;
+    max-height: 90vh;
+    object-fit: contain; /* Ensures the whole image is visible without cropping */
+    display: block;
         }
-
+.modal-card {
+    width: auto;
+    max-width: 90vw; /* Ensures the modal is responsive */
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: transparent; /* Keeps the background consistent */
+    overflow: hidden;
+    
+    }
         .modal-content {
             overflow-y: none;
             max-height: 95vh;
@@ -92,8 +101,18 @@ cat > "$OUTPUT_FILE" <<EOL
             background-color: transparent !important;
         }
         .modal-card-body{
-          overflow: clip !important;
+             display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
           }
+          body.modal-open {
+    overflow: hidden;
+}
+.delete{
+margin-left: 10px;}
     </style>
 </head>
 <body>
@@ -160,7 +179,7 @@ for img in "$IMAGE_DIR"/*.{jpg,jpeg,png,gif,webp}; do
         printf "                    <div class=\"modal-background\"></div>\n" >> "$OUTPUT_FILE"
         printf "                    <div class=\"modal-card\">\n" >> "$OUTPUT_FILE"
         printf "                        <header class=\"modal-card-head\">\n" >> "$OUTPUT_FILE"
-        printf "                            <p class=\"modal-card-title\ has-size-4">%s</p>\n" "$caption" >> "$OUTPUT_FILE"
+        printf "                            <p class=\"modal-card-title has-size-4\">%s</p>\n" "$caption" >> "$OUTPUT_FILE"
         printf "                            <button class=\"delete\" aria-label=\"close\" data-action=\"close\"></button>\n" >> "$OUTPUT_FILE"
         printf "                        </header>\n" >> "$OUTPUT_FILE"
         printf "                        <section class=\"modal-card-body\">\n" >> "$OUTPUT_FILE"
diff --git a/gallery/sculpture/index.html b/gallery/sculpture/index.html
index c20079e..5c92005 100644
--- a/gallery/sculpture/index.html
+++ b/gallery/sculpture/index.html
@@ -18,7 +18,7 @@
 <link rel="stylesheet" href="../../style.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <style>
-        .gallery {
+ .gallery {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
             gap: 15px;
@@ -50,16 +50,33 @@
             font-family: 'Autour One', cursive;
         }
 
-        .modal-image {
-            max-width: 90%;
-            max-height: 90vh;
-            display: block;
-            margin: 0 auto;
-            border-radius: 10px;
-        }
+          .modal{
+        --bulma-modal-content-width: 95vw;
+        --bulma-modal-content-height: 95vh;
 
+        }
+        .modal-image {
+        width: auto;
+    height: auto;
+    max-width: 90vw;
+    max-height: 90vh;
+    object-fit: contain; /* Ensures the whole image is visible without cropping */
+    display: block;
+        }
+.modal-card {
+    width: auto;
+    max-width: 90vw; /* Ensures the modal is responsive */
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: transparent; /* Keeps the background consistent */
+    overflow: hidden;
+    
+    }
         .modal-content {
-            overflow-y: auto;
+            overflow-y: none;
             max-height: 95vh;
             background-color: transparent !important;
         }
@@ -68,6 +85,19 @@
             font-family: 'Autour One', cursive;
             background-color: transparent !important;
         }
+        .modal-card-body{
+             display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
+          }
+          body.modal-open {
+    overflow: hidden;
+}
+.delete{
+margin-left: 10px;}
     </style>
 </head>
 <body>
diff --git a/gallery/sculpture/updateGallery.sh b/gallery/sculpture/updateGallery.sh
index 0994f27..39bea25 100755
--- a/gallery/sculpture/updateGallery.sh
+++ b/gallery/sculpture/updateGallery.sh
@@ -33,7 +33,7 @@ cat > "$OUTPUT_FILE" <<EOL
 <link rel="stylesheet" href="../../style.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <style>
-        .gallery {
+ .gallery {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
             gap: 15px;
@@ -71,16 +71,25 @@ cat > "$OUTPUT_FILE" <<EOL
 
         }
         .modal-image {
-            max-width: 90vw;
-            max-height: 90vh;
-            display: block;
-            margin: 0 auto;
-            border-radius: 10px;
-            max-width: 90vw;
-              max-height: 90vh;
-            overflow: clip;
+        width: auto;
+    height: auto;
+    max-width: 90vw;
+    max-height: 90vh;
+    object-fit: contain; /* Ensures the whole image is visible without cropping */
+    display: block;
         }
-
+.modal-card {
+    width: auto;
+    max-width: 90vw; /* Ensures the modal is responsive */
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: transparent; /* Keeps the background consistent */
+    overflow: hidden;
+    
+    }
         .modal-content {
             overflow-y: none;
             max-height: 95vh;
@@ -92,8 +101,18 @@ cat > "$OUTPUT_FILE" <<EOL
             background-color: transparent !important;
         }
         .modal-card-body{
-          overflow: clip !important;
+             display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
           }
+          body.modal-open {
+    overflow: hidden;
+}
+.delete{
+margin-left: 10px;}
     </style>
 </head>
 <body>
