Bugfix

src/Controller/FrontendModule/MeilisearchSearchController.php

@@ -5,10 +5,12 @@ namespace MummertMedia\ContaoMeilisearchBundle\Controller\FrontendModule;
 use Contao\Config;
 use Contao\CoreBundle\Controller\FrontendModule\AbstractFrontendModuleController;
 use Contao\CoreBundle\Twig\FragmentTemplate;
+use Contao\CoreBundle\ServiceAnnotation\Asset;
 use Contao\ModuleModel;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 
+#[Asset('css/meilisearch.css')]
 class MeilisearchSearchController extends AbstractFrontendModuleController
 {
     protected function getResponse(
@@ -18,7 +20,7 @@ class MeilisearchSearchController extends AbstractFrontendModuleController
     ): Response {
         $template->set('meiliLimit', (int) ($model->meiliLimit ?: 50));
 
-        // ✅ Config hier lesen
+        // Konfiguration sauber im Controller lesen
         $template->set('meiliHost', Config::get('meilisearch_host'));
         $template->set('meiliIndex', Config::get('meilisearch_index'));
         $template->set('meiliSearchKey', Config::get('meilisearch_api_search'));

src/Resources/public/css/meilisearch.css

@@ -0,0 +1,53 @@
+.meilisearch-search {
+    position: relative;
+}
+
+.meilisearch-search-field {
+    position: relative;
+}
+
+.meilisearch-search input[type="search"] {
+    width: 100%;
+    max-width: 600px;
+    padding: 0.75rem 2.5rem 0.75rem 0.75rem;
+    font-size: 1rem;
+}
+
+.meilisearch-clear {
+    position: absolute;
+    right: 0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: 0;
+    font-size: 1.25rem;
+    cursor: pointer;
+}
+
+.meilisearch-results {
+    margin-top: 0.5rem;
+    border: 1px solid #e0e0e0;
+    background: #fff;
+}
+
+.meilisearch-result {
+    display: grid;
+    grid-template-columns: 60px auto;
+    gap: 1rem;
+    padding: 1rem;
+    border-bottom: 1px solid #eee;
+}
+
+.meilisearch-result:hover {
+    background: #f5f5f5;
+}
+
+.meilisearch-result img {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+}
+
+.meilisearch-extract mark {
+    background: #ddd;
+}