fix clipping in lightbox image viewer

style.css

@@ -429,7 +429,6 @@ div.dimensions-tools{
     display: none;
     position: fixed;
     z-index: 1001;
-  padding-top: 100px;
     left: 0;
     top: 0;
     width: 100%;
@@ -438,74 +437,40 @@ div.dimensions-tools{
     background-color: rgba(20, 20, 20, 0.95);
     user-select: none;
     -webkit-user-select: none;
+    flex-direction: column;
 }
 
 .modalControls {
-    display: grid;
+    display: flex;
-    grid-template-columns: 32px 32px 32px 1fr 32px;
+    gap: 1em;
-    grid-template-areas: "zoom tile save space close";
+    padding: 1em;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    padding: 16px;
-    gap: 16px;
     background-color: rgba(0,0,0,0.2);
 }
-
 .modalClose {
-    grid-area: close;
+    margin-left: auto;
 }
-
+.modalControls span{
-.modalZoom {
-    grid-area: zoom;
-}
-
-.modalSave {
-    grid-area: save;
-}
-
-.modalTileImage {
-    grid-area: tile;
-}
-
-.modalClose,
-.modalZoom,
-.modalTileImage {
     color: white;
     font-size: 35px;
     font-weight: bold;
     cursor: pointer;
+    width: 1em;
 }
 
-.modalSave {
+.modalControls span:hover, .modalControls span:focus{
-    color: white;
-    font-size: 28px;
-    margin-top: 8px;
-    font-weight: bold;
-    cursor: pointer;
-}
-
-.modalClose:hover,
-.modalClose:focus,
-.modalSave:hover,
-.modalSave:focus,
-.modalZoom:hover,
-.modalZoom:focus {
     color: #999;
     text-decoration: none;
-  cursor: pointer;
 }
 
-#modalImage {
+#lightboxModal > img {
     display: block;
     margin: auto;
     width: auto;
 }
 
-.modalImageFullscreen {
+#lightboxModal > img.modalImageFullscreen{
     object-fit: contain;
-    height: 90%;
+    height: 100%;
 }
 
 .modalPrev,