From e1009131a0b376a166480b42e991a097f10ff685 Mon Sep 17 00:00:00 2001 From: yekta Date: Sat, 17 Oct 2026 18:18:30 +0000 Subject: [PATCH] web: show a dashed outline where dragged cards will land While a project, service or service group card is being dragged, its drop spot used to show a faded copy of the card at 40% opacity. Now the card's content is hidden and the spot shows an empty dashed outline in the border color at full opacity. Service cards inside a group use a smaller corner radius on the outline to match their own rounding. --- apps/web/src/components/service/service-card.tsx | 2 +- apps/web/src/components/service/service-group-card.tsx | 7 +++++-- apps/web/src/components/team/project-card.tsx | 2 +- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/apps/web/src/components/service/service-card.tsx b/apps/web/src/components/service/service-card.tsx index e0f33909..7d3bbb58 100644 --- a/apps/web/src/components/service/service-card.tsx +++ b/apps/web/src/components/service/service-card.tsx @@ -168,7 +168,7 @@ export default function ServiceCard({ data-dragging={isDragging || undefined} data-drag-source={isDragSource || undefined} className={cn( - "group/item data-deleting:animate-skeleton-smooth-weaker relative flex min-h-40 w-full flex-col p-1 transition-opacity duration-(--skeleton-smooth-lead-in) data-deleting:pointer-events-none data-deleting:opacity-(--skeleton-smooth-weaker-opacity) data-drag-source:opacity-40 data-dragging:cursor-grabbing", + "group/item data-deleting:animate-skeleton-smooth-weaker data-drag-source:before:border-border relative flex min-h-40 w-full flex-col p-1 transition-opacity duration-(--skeleton-smooth-lead-in) data-deleting:pointer-events-none data-deleting:opacity-(--skeleton-smooth-weaker-opacity) data-drag-source:*:invisible data-drag-source:before:absolute data-drag-source:before:inset-1 data-drag-source:before:rounded-xl data-drag-source:before:border data-drag-source:before:border-dashed data-dragging:cursor-grabbing", className, )} > diff --git a/apps/web/src/components/service/service-group-card.tsx b/apps/web/src/components/service/service-group-card.tsx index eab26907..2aee5ebd 100644 --- a/apps/web/src/components/service/service-group-card.tsx +++ b/apps/web/src/components/service/service-group-card.tsx @@ -78,7 +78,7 @@ export default function ServiceGroupCard({ data-dragging={isDragging || undefined} data-drag-source={isDragSource || undefined} className={cn( - "group/group relative flex w-full p-1 data-drag-source:opacity-40 data-dragging:cursor-grabbing", + "group/group data-drag-source:before:border-border relative flex w-full p-1 data-drag-source:*:invisible data-drag-source:before:absolute data-drag-source:before:inset-1 data-drag-source:before:rounded-xl data-drag-source:before:border data-drag-source:before:border-dashed data-dragging:cursor-grabbing", className, )} > @@ -130,7 +130,10 @@ export default function ServiceGroupCard({ projectId={projectId} environmentId={environmentId} isDeleting={isDeleting} - className={cn("min-h-40", classNameServiceCard)} + className={cn( + "min-h-40 data-drag-source:before:rounded-lg", + classNameServiceCard, + )} classNameCard="rounded-lg" classNameVolumes="rounded-b-lg" classNameVolumeLast="rounded-b-lg" diff --git a/apps/web/src/components/team/project-card.tsx b/apps/web/src/components/team/project-card.tsx index 41c42dcb..1f8c1a06 100644 --- a/apps/web/src/components/team/project-card.tsx +++ b/apps/web/src/components/team/project-card.tsx @@ -65,7 +65,7 @@ export default function ProjectCard({ data-dragging={isDragging || undefined} data-drag-source={isDragSource || undefined} className={cn( - "group/item data-deleting:animate-skeleton-smooth-weaker relative flex w-full flex-col p-1 transition-opacity duration-(--skeleton-smooth-lead-in) data-deleting:pointer-events-none data-deleting:opacity-(--skeleton-smooth-weaker-opacity) data-drag-source:opacity-40 data-dragging:cursor-grabbing", + "group/item data-deleting:animate-skeleton-smooth-weaker data-drag-source:before:border-border relative flex w-full flex-col p-1 transition-opacity duration-(--skeleton-smooth-lead-in) data-deleting:pointer-events-none data-deleting:opacity-(--skeleton-smooth-weaker-opacity) data-drag-source:*:invisible data-drag-source:before:absolute data-drag-source:before:inset-1 data-drag-source:before:rounded-xl data-drag-source:before:border data-drag-source:before:border-dashed data-dragging:cursor-grabbing", className, )} >