|
|
@@ -341,17 +341,18 @@ async function onReorder() {
|
|
|
<template #item="{ element: provider }">
|
|
|
<div
|
|
|
:key="provider.id"
|
|
|
- class="drag-handle rounded-lg border p-4 relative cursor-grab active:cursor-grabbing"
|
|
|
+ class="rounded-lg border p-4 flex items-start gap-3"
|
|
|
>
|
|
|
- <div
|
|
|
- :class="[
|
|
|
- 'absolute top-2 left-2 w-2 h-2 rounded-full',
|
|
|
- provider.enabled === 1 ? 'bg-green-500' : 'bg-muted-foreground'
|
|
|
- ]"
|
|
|
- :title="provider.enabled === 1 ? 'Enabled' : 'Disabled'"
|
|
|
- />
|
|
|
- <div class="flex items-start gap-3">
|
|
|
- <div class="min-w-0 flex-1 space-y-1">
|
|
|
+ <!-- Left div: Draggable content area -->
|
|
|
+ <div class="drag-handle flex-1 min-w-0 cursor-grab active:cursor-grabbing relative">
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ 'absolute top-0 left-0 w-2 h-2 rounded-full',
|
|
|
+ provider.enabled === 1 ? 'bg-green-500' : 'bg-muted-foreground'
|
|
|
+ ]"
|
|
|
+ :title="provider.enabled === 1 ? 'Enabled' : 'Disabled'"
|
|
|
+ />
|
|
|
+ <div class="space-y-1 pl-4">
|
|
|
<p v-if="provider.name?.trim()" class="font-semibold truncate">
|
|
|
{{ provider.name.trim() }}
|
|
|
</p>
|
|
|
@@ -360,9 +361,13 @@ async function onReorder() {
|
|
|
{{ provider.url }}
|
|
|
</p>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Right div: Non-draggable button area -->
|
|
|
+ <div class="shrink-0">
|
|
|
<DropdownMenu>
|
|
|
<DropdownMenuTrigger asChild>
|
|
|
- <Button variant="ghost" size="icon" class="h-8 w-8 shrink-0">
|
|
|
+ <Button variant="ghost" size="icon" class="h-8 w-8">
|
|
|
<MoreHorizontal class="h-4 w-4" />
|
|
|
</Button>
|
|
|
</DropdownMenuTrigger>
|
