Fix search results corner styling and ensure consistent dark backgrounds

- Add overflow: hidden to prevent corner background artifacts
- Improve border-radius consistency between container and anchor elements
- Add inline styles to dynamically generated search results for reliable styling
- Enhance CSS with !important declarations to override any conflicting styles
- Increase spacing between search result items for better visual separation
- Use border-radius: inherit to ensure perfect corner alignment

This ensures all search results have clean, properly rounded corners with consistent dark backgrounds throughout the entire item area.

Author: mich-elle-luna

layouts/partials/search-modal.html

@@ -14,19 +14,29 @@
     color: #9ca3af;
   }
 
+  .search-item {
+    background-color: #374151 !important;
+    border-radius: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+    overflow: hidden !important;
+  }
+
   .search-item a {
-    color: #d1d5db;
-    padding: 0.75rem;
-    display: block;
-    border-radius: 0.375rem;
-    background-color: #374151;
-    transition: background-color 0.2s;
+    color: #d1d5db !important;
+    padding: 0.75rem !important;
+    display: block !important;
+    background-color: #374151 !important;
+    transition: background-color 0.2s !important;
+    text-decoration: none !important;
+    border-radius: inherit !important;
   }
 
+  .search-item:hover,
   .search-item a:hover,
+  .search-item[aria-selected],
   .search-item[aria-selected] a {
-    background-color: #4b5563;
-    color: white;
+    background-color: #4b5563 !important;
+    color: white !important;
   }
 
   .search-item-title {
@@ -208,8 +218,8 @@
             Object.keys(result).forEach((key, index) => {
               resultsContainer.insertAdjacentHTML(
                 'beforeend',
-                `<dd class="search-item" role="option">
-                  <a href="${result[key].url}">
+                `<dd class="search-item" role="option" style="background-color: #374151; border-radius: 0.5rem; margin-bottom: 0.5rem; overflow: hidden;">
+                  <a href="${result[key].url}" style="color: #d1d5db; padding: 0.75rem; display: block; background-color: #374151; text-decoration: none; border-radius: inherit;">
                     <span class="search-item-icon"></span>
                     <span class="search-item-content">
                       ${result[key].path && result[key].product ? `<div class="search-item-container"><span class="search-item-path">${result[key].path}</span><span class="px-2">→</span><span class="search-item-path">${result[key].product}</span></div>` : ''}