fix(vton-modal): close button alignment in panel header (#602)

packages/web/lib/components/vton/VtonItemPanel.tsx

@@ -29,6 +29,7 @@ interface VtonItemPanelProps {
   searchQuery: string;
   error: string | null;
   bgError: { error: string | null } | null;
+  onClose: () => void;
   onSourceModeChange: (mode: "items" | "posts") => void;
   onCategoryChange: (category: Category) => void;
   onSearchChange: (query: string) => void;
@@ -83,6 +84,7 @@ export function VtonItemPanel({
   searchQuery,
   error,
   bgError,
+  onClose,
   onSourceModeChange,
   onCategoryChange,
   onSearchChange,
@@ -100,11 +102,19 @@ export function VtonItemPanel({
       className="flex w-full flex-col border-t border-white/10 md:w-[340px] md:border-t-0 md:border-l"
     >
       {/* Header */}
-      <div className="border-b border-white/10 px-4 py-3">
+      <div className="flex items-center justify-between border-b border-white/10 px-4 py-3">
         <h2 className="text-sm font-semibold text-white">
           Virtual Try-On
           <span className="ml-2 text-[#eafd67]">PoC</span>
         </h2>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close VTON modal"
+          className="rounded-full bg-white/10 p-1.5 text-white/70 transition-colors hover:bg-white/20 hover:text-white"
+        >
+          <X size={16} />
+        </button>
       </div>
 
       <div className="flex border-b border-white/10 p-2">

packages/web/lib/components/vton/VtonModal.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState, useRef, useCallback, useEffect, useMemo } from "react";
-import { X } from "lucide-react";
 import { toast } from "sonner";
 import {
   useVtonStore,
@@ -362,13 +361,6 @@ export function VtonModal() {
         onClick={handleClose}
       />
       <div className="relative z-10 flex h-[90vh] w-[95vw] max-w-6xl flex-col overflow-hidden rounded-2xl border border-white/10 bg-[#0a0a0a] shadow-2xl md:flex-row">
-        <button
-          onClick={handleClose}
-          aria-label="Close VTON modal"
-          className="absolute top-4 right-4 z-30 rounded-full bg-white/10 p-2 text-white/70 transition-colors hover:bg-white/20 hover:text-white"
-        >
-          <X size={18} />
-        </button>
         <VtonPhotoArea
           personPreview={personPreview}
           displayPersonPreview={displayPersonPreview}
@@ -394,6 +386,7 @@ export function VtonModal() {
         <VtonItemPanel
           sourceMode={sourceMode}
           isPostMode={isPostMode}
+          onClose={handleClose}
           hasActiveJob={hasActiveJob}
           activeCategory={activeCategory}
           selectedItems={selectedItems}