fix: mention-dropdown Umrandung passt sich Zweizeiligkeit an; neuer Bug Chat-Eingabe-Fix

DEBUG-List.md

@@ -26,5 +26,7 @@ Debug:
 
 
 
+\-Mobilansicht - Chat-Eingabe nicht direkt sichtbar: Innerhalb eines Chats muss man scrollen um zur Texteingabe zu gelangen. Die Eingabeleiste soll fixiert am unteren Bildschirmrand bleiben (sticky/fixed), sodass man ohne Scrollen direkt antworten kann.
+
 \-User Delete Funktion, für den Unwahrscheinlichen fall ein User möchte sein Konto löschen wird ein Workflow benötigt, der nach einer Bestätigung mittels Tiernamen Eingabe (Auswahl eins von möglichen) den Kompletten Account löscht, sowie alle Hochgeladen Bilder/Videos und erzeugten Posts, Rückstandslos.
 

src/components/ui/mention-textarea.tsx

@@ -127,23 +127,25 @@ export function MentionTextarea({
             <button
               key={pet.id}
               type="button"
-              className="w-full flex items-center gap-3 px-3 py-2.5 hover:bg-muted transition-colors text-left"
+              className="w-full block px-3 py-2.5 hover:bg-muted transition-colors text-left"
               onMouseDown={(e) => {
                 e.preventDefault();
                 handleSelect(pet.name);
               }}
             >
-              <Avatar className="h-9 w-9 shrink-0">
-                {pet.avatarKey && (
-                  <AvatarImage src={getAvatarUrl(pet.avatarKey)!} alt={pet.name} />
-                )}
-                <AvatarFallback className="text-xs font-semibold bg-orange-100 text-orange-700">
-                  {pet.name.slice(0, 2).toUpperCase()}
-                </AvatarFallback>
-              </Avatar>
-              <div className="flex-1 min-w-0">
-                <p className="text-sm font-semibold text-foreground truncate">{pet.name}</p>
-                <p className="text-xs text-muted-foreground">{pet.species.name}</p>
+              <div className="flex items-center gap-3">
+                <Avatar className="h-9 w-9 shrink-0">
+                  {pet.avatarKey && (
+                    <AvatarImage src={getAvatarUrl(pet.avatarKey)!} alt={pet.name} />
+                  )}
+                  <AvatarFallback className="text-xs font-semibold bg-orange-100 text-orange-700">
+                    {pet.name.slice(0, 2).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-semibold text-foreground truncate">{pet.name}</p>
+                  <p className="text-xs text-muted-foreground">{pet.species.name}</p>
+                </div>
               </div>
             </button>
           ))}