refine: animate drag handle with push effect in edit mode
- Remove flex gap-3 from parent container to enable width animation - Add conditional width (w-8/w-0) and margin-right (mr-3/mr-0) to drag handle button - Add overflow-hidden to prevent icon overflow during width transition - Content now smoothly shifts right by 44px when entering edit mode - Maintains 200ms transition-all for smooth push animation This creates a more natural "push-out" effect where the drag handle appears to push the provider content aside, rather than just fading in.
This commit is contained in:
@@ -99,14 +99,14 @@ export function ProviderCard({
|
|||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||||
<div className="flex flex-1 items-start gap-3">
|
<div className="flex flex-1 items-start">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={cn(
|
className={cn(
|
||||||
"mt-1 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border text-muted-foreground transition-all duration-200",
|
"mt-1 flex h-8 flex-shrink-0 items-center justify-center overflow-hidden rounded-md border text-muted-foreground transition-all duration-200",
|
||||||
isEditMode
|
isEditMode
|
||||||
? "border-muted hover:border-primary hover:text-foreground opacity-100"
|
? "w-8 mr-3 border-muted hover:border-primary hover:text-foreground opacity-100"
|
||||||
: "border-transparent opacity-0 pointer-events-none",
|
: "w-0 mr-0 border-transparent opacity-0 pointer-events-none",
|
||||||
dragHandleProps?.isDragging && "border-primary text-primary",
|
dragHandleProps?.isDragging && "border-primary text-primary",
|
||||||
)}
|
)}
|
||||||
aria-label={t("provider.dragHandle")}
|
aria-label={t("provider.dragHandle")}
|
||||||
|
|||||||
Reference in New Issue
Block a user