fix dark reader plugin not working on map results

static/css/style.css

@@ -2017,7 +2017,7 @@ body, h1, p, a, input, button {
             position: relative;
             max-width: 80%;
             max-height: 80%;
-            background: #fff;
+            background: var(--search-bg);
             padding: 20px;
             box-sizing: border-box;
             overflow: hidden;
@@ -2035,12 +2035,12 @@ body, h1, p, a, input, button {
 
         #viewer-title {
             font-size: 18px;
-            color: #000;
+            color: var(--text-color);
             margin-bottom: 10px;
         }
 
         #viewer-source-button {
-            color: #1a0dab;
+            color: var(--link);
             text-decoration: none;
             font-size: 16px;
         }
@@ -2070,4 +2070,4 @@ body, h1, p, a, input, button {
             right: 10px;
             top: 50%;
             transform: translateY(-50%);
-        }
+        }

static/js/imagetitletrim.js

@@ -0,0 +1,56 @@
+document.addEventListener('DOMContentLoaded', function() {
+    let imagesContainer = document.querySelector('.images');
+    let observer;
+
+    // Function to trim image titles based on the image width
+    function trimTitles() {
+        const images = document.querySelectorAll('.images .image');
+        images.forEach((element) => {
+            const imgElement = element.querySelector('img.clickable');
+            const titleElement = element.querySelector('.img_title.clickable');
+            const detailsElement = element.querySelector('.details');
+
+            if (imgElement.complete && imgElement.naturalWidth) {
+                const imageWidth = imgElement.clientWidth;
+
+                // Set the width of the details div and title to match the image width
+                detailsElement.style.width = imageWidth + 'px';
+                titleElement.style.maxWidth = imageWidth + 'px';
+            }
+
+            // // Add load event listener in case images load dynamically
+            // imgElement.addEventListener('load', function() {
+            //     const imageWidth = imgElement.clientWidth;
+            //     detailsElement.style.width = imageWidth + 'px';
+            //     titleElement.style.maxWidth = imageWidth + 'px';
+            // });
+        });
+    }
+
+    // Call trimTitles periodically to account for dynamic loading, not happy about this one
+    setInterval(() => {
+        trimTitles();
+    }, 10);
+
+    // Observe for dynamically added images
+    function observeNewImages() {
+        observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                mutation.addedNodes.forEach(function(node) {
+                    if (node.nodeType === 1 && node.classList.contains('image')) {
+                        trimTitles();
+                    }
+                });
+            });
+        });
+
+        // Observe the images container for changes
+        observer.observe(imagesContainer, { childList: true, subtree: true });
+    }
+
+    // Run initial title trimming after page load
+    trimTitles();
+
+    // Start observing for dynamic image loading
+    observeNewImages();
+});