QR Code Maker update

map/app/public/css/style.css

@@ -1013,6 +1013,105 @@ body {
     color: #666;
 }
 
+/* Search Result Item with QR Button */
+.search-result-item {
+    position: relative;
+    padding: 12px;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.search-result-item:last-child {
+    border-bottom: none;
+}
+
+.search-result-item .make-qr-btn {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    padding: 4px 8px;
+    font-size: 12px;
+}
+
+/* QR Code Modal Styles */
+.qr-modal {
+    z-index: 11000; /* Ensure QR modal is above everything else */
+}
+
+.qr-modal-content {
+    max-width: 400px;
+    text-align: center;
+    z-index: 11001; /* Even higher for the content */
+    position: relative;
+}
+
+.qr-modal-body {
+    padding: 30px;
+}
+
+.qr-code-image {
+    max-width: 256px;
+    height: auto;
+    margin: 0 auto 20px;
+    display: block;
+    border: 4px solid var(--light-color);
+    border-radius: var(--border-radius);
+}
+
+.qr-code-info {
+    margin-top: 20px;
+}
+
+.qr-code-info p {
+    margin-bottom: 10px;
+    color: var(--secondary-color);
+    font-size: 14px;
+}
+
+.qr-code-url {
+    color: var(--primary-color);
+    text-decoration: none;
+    word-break: break-all;
+    font-size: 14px;
+}
+
+.qr-code-url:hover {
+    text-decoration: underline;
+}
+
+.qr-loading {
+    padding: 40px;
+}
+
+/* Adjust search result layout to accommodate button */
+.docs-search-results-list .search-result {
+    display: block;
+    padding-right: 100px; /* Make room for QR button */
+}
+
+/* Mobile responsiveness for QR button */
+@media (max-width: 768px) {
+    .search-result-item .make-qr-btn {
+        position: static;
+        display: block;
+        width: 100%;
+        margin-top: 10px;
+    }
+    
+    .docs-search-results-list .search-result {
+        padding-right: 12px;
+    }
+    
+    .qr-modal-content {
+        width: 95%;
+        max-width: 350px;
+        z-index: 11001; /* Maintain high z-index on mobile */
+    }
+    
+    .qr-modal {
+        z-index: 11000; /* Maintain high z-index on mobile */
+    }
+}
+
 /* Mobile responsiveness */
 @media (max-width: 768px) {
     .docs-search-container {
@@ -1020,7 +1119,7 @@ body {
         width: 100%;
         margin: 10px 0;
         padding: 0 0px;
-        /* Remove z-index */
+        z-index:10002/* Remove z-index */
     }
     
     .docs-search-wrapper {