improvements for images (text overlapping fix, image viewer, page width fix)

static/css/style-fixedwidth.css

@@ -0,0 +1,7 @@
+/* Ensure the body width is fixed and prevents resizing by the user */
+body {
+    overflow-x: hidden;   /* Prevent horizontal scrolling by user */
+    width: 100vw;         /* Fix the width of the viewport */
+    max-width: 100vw;     /* Prevent page from extending wider than the viewport */
+    box-sizing: border-box;
+}

static/css/style.css

@@ -257,6 +257,7 @@ html {
     display: flex;
     flex-wrap: wrap;
     margin-right: 35.4%;
+    max-width: 100%;
     position: relative;
 }
 
@@ -338,7 +339,7 @@ html {
     height: 100%;
     width: 100%;
     object-fit: cover;
-    vertical-align: bottom;
+    display: block;
     border-radius: 12px;
     box-sizing: border-box;
     border: 1px solid var(--border);
@@ -1997,3 +1998,76 @@ body, h1, p, a, input, button {
         --box-shadow: #ffffff20; 
     }
 } */
+
+        /* Image Viewer Overlay */
+        #image-viewer-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.9);
+            z-index: 999;
+            display: none;
+            justify-content: center;
+            align-items: center;
+        }
+
+        #image-viewer {
+            position: relative;
+            max-width: 80%;
+            max-height: 80%;
+            background: #fff;
+            padding: 20px;
+            box-sizing: border-box;
+            overflow: hidden;
+            text-align: center;
+        }
+
+        #viewer-image {
+            max-width: 100%;
+            max-height: 60vh;
+        }
+
+        #viewer-info {
+            margin-top: 15px;
+        }
+
+        #viewer-title {
+            font-size: 18px;
+            color: #000;
+            margin-bottom: 10px;
+        }
+
+        #viewer-source-button {
+            color: #1a0dab;
+            text-decoration: none;
+            font-size: 16px;
+        }
+
+        #viewer-close-button,
+        #viewer-prev-button,
+        #viewer-next-button {
+            position: absolute;
+            top: 10px;
+            color: #fff;
+            font-size: 36px;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        #viewer-close-button {
+            right: 10px;
+        }
+
+        #viewer-prev-button {
+            left: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        #viewer-next-button {
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+        }