From 76694e003c8eb32838f5fc250c8eec94a59564ca Mon Sep 17 00:00:00 2001
From: overcuriousity <overcuriousity@posteo.org>
Date: Mon, 18 Aug 2025 00:34:29 +0200
Subject: [PATCH] attempt fix layout

---
 src/components/AIQueryInterface.astro | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/src/components/AIQueryInterface.astro b/src/components/AIQueryInterface.astro
index c09dc92..987c795 100644
--- a/src/components/AIQueryInterface.astro
+++ b/src/components/AIQueryInterface.astro
@@ -2022,7 +2022,7 @@ class AIQueryInterface {
     
     return `
       <div class="card ${this.getToolClass(tool, 'card')} cursor-pointer relative" onclick="window.showToolDetails('${tool.name}')">
-        <div class="absolute -top-2 -right-2 w-8 h-8 text-white rounded-xl flex items-center justify-center font-semibold text-lg" style="background-color: ${rankColors[rank]};">
+        <div style="position: absolute; top: -8px; right: -8px; width: 32px; height: 32px; background-color: ${rankColors[rank]}; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.125rem;">
           ${rank}
         </div>
 
@@ -2155,16 +2155,16 @@ class AIQueryInterface {
         ${pros?.length ? `
           <div class="card-info-sm border-l-4" style="border-left-color: var(--color-accent); background-color: var(--color-oss-bg);">
             <h5 class="mb-2 text-accent text-sm">✓ Vorteile</h5>
-            <ul class="ml-4">
-              ${pros.map(pro => `<li class="mb-1">${sanitizeText(pro)}</li>`).join('')}
+            <ul style="margin: 0; padding-left: 1rem;">
+              ${pros.map(pro => `<li style="margin-bottom: 0.25rem;">${sanitizeText(pro)}</li>`).join('')}
             </ul>
           </div>
         ` : ''}
         ${cons?.length ? `
           <div class="card-info-sm border-l-4" style="border-left-color: var(--color-warning); background-color: var(--color-hosted-bg);">
             <h5 class="mb-2 text-warning text-sm">✗ Nachteile</h5>
-            <ul class="ml-4">
-              ${cons.map(con => `<li class="mb-1">${sanitizeText(con)}</li>`).join('')}
+            <ul style="margin: 0; padding-left: 1rem;">
+              ${cons.map(con => `<li style="margin-bottom: 0.25rem;">${sanitizeText(con)}</li>`).join('')}
             </ul>
           </div>
         ` : ''}
@@ -2231,15 +2231,6 @@ class AIQueryInterface {
     }
   }
 
-  getSuitabilityText(score) {
-    const texts = {
-      high: 'GUT GEEIGNET',
-      medium: 'GEEIGNET', 
-      low: 'VIELLEICHT GEEIGNET'
-    };
-    return texts[score] || 'GEEIGNET';
-  }
-
   showLoading() {
     showElement(this.elements.loading);
   }