fix: relocate AlertDialog outside of DropdownMenu to ensure proper centering

frontend/src/components/torrent/table.rs

@@ -6,6 +6,7 @@ use crate::store::{get_action_messages, show_toast};
 use crate::api;
 use shared::NotificationLevel;
 use crate::components::context_menu::TorrentContextMenu;
+use crate::components::ui::card::{Card, CardHeader, CardTitle, CardContent as CardBody};
 use crate::components::ui::data_table::*;
 use crate::components::ui::checkbox::Checkbox;
 use crate::components::ui::badge::{Badge, BadgeVariant};
@@ -230,6 +231,7 @@ pub fn TorrentTable() -> impl IntoView {
 
                 <div class="flex items-center gap-2">
                     <Show when=move || has_selection.get()>
+                        <div class="flex items-center gap-2">
                             <DropdownMenu>
                                 <DropdownMenuTrigger class="w-[140px] h-9 gap-2">
                                     <Ellipsis class="size-4" />
@@ -247,12 +249,21 @@ pub fn TorrentTable() -> impl IntoView {
                                         
                                         <div class="my-1 h-px bg-border" />
                                         
+                                        // Trigger the hidden AlertDialog from this menu item
+                                        <DropdownMenuItem class="text-destructive focus:bg-destructive/10 cursor-pointer" on:click=move |_| {
+                                            if let Some(trigger) = document().get_element_by_id("bulk-delete-trigger") {
+                                                let _ = trigger.dyn_into::<web_sys::HtmlElement>().map(|el| el.click());
+                                            }
+                                        }>
+                                            <Trash2 class="mr-2 size-4" /> "Toplu Sil..."
+                                        </DropdownMenuItem>
+                                    </DropdownMenuGroup>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+
+                            // Hidden AlertDialog moved outside the DropdownMenuContent to ensure proper centering
                             <AlertDialog>
-                                        <AlertDialogTrigger class="w-full text-left">
+                                <AlertDialogTrigger id="bulk-delete-trigger" class="hidden" />
-                                            <div class="inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm transition-colors text-destructive hover:bg-destructive/10 focus:bg-destructive/10 cursor-pointer">
-                                                <Trash2 class="size-4" /> "Toplu Sil..."
-                                            </div>
-                                        </AlertDialogTrigger>
                                 <AlertDialogContent class="sm:max-w-[425px]">
                                     <AlertDialogBody>
                                         <AlertDialogHeader class="space-y-3">
@@ -260,7 +271,7 @@ pub fn TorrentTable() -> impl IntoView {
                                                 <Trash2 class="size-6" />
                                                 "Toplu Silme Onayı"
                                             </AlertDialogTitle>
-                                                    <AlertDialogDescription class="text-sm leading-relaxed">
+                                            <AlertDialogDescription class="text-sm leading-relaxed text-left">
                                                 {move || format!("Seçili {} adet torrent silinecek. Lütfen silme yöntemini seçin:", selected_count.get())}
                                                 <div class="mt-4 p-4 bg-destructive/5 rounded-lg border border-destructive/10 text-xs text-destructive/80 font-medium">
                                                     "⚠️ Dikkat: Verilerle birlikte silme işlemi dosyaları diskten de kalıcı olarak kaldıracaktır."
@@ -291,9 +302,7 @@ pub fn TorrentTable() -> impl IntoView {
                                     </AlertDialogBody>
                                 </AlertDialogContent>
                             </AlertDialog>
-                                </DropdownMenuGroup>
+                        </div>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
                     </Show>
 
                     // Mobile Sort Menu