adjusting spaces for X button in file-preview

app/components/chat/FilePreview.tsx

@@ -1,7 +1,5 @@
-// Remove the lucide-react import
 import React from 'react';
 
-// Rest of the interface remains the same
 interface FilePreviewProps {
   files: File[];
   imageDataList: string[];
@@ -14,19 +12,17 @@ const FilePreview: React.FC<FilePreviewProps> = ({ files, imageDataList, onRemov
   }
 
   return (
-    <div className="flex flex-row overflow-x-auto">
+    <div className="flex flex-row overflow-x-auto -mt-2">
       {files.map((file, index) => (
         <div key={file.name + file.size} className="mr-2 relative">
           {imageDataList[index] && (
-            <div className="relative">
+            <div className="relative pt-4 pr-4">
               <img src={imageDataList[index]} alt={file.name} className="max-h-20" />
               <button
                 onClick={() => onRemove(index)}
-                className="absolute -top-2 -right-2 z-10 bg-white rounded-full p-1 shadow-md hover:bg-gray-100"
+                className="absolute top-1 right-1 z-10 bg-black rounded-full w-5 h-5 shadow-md hover:bg-gray-900 transition-colors flex items-center justify-center"
               >
-                <div className="bg-black rounded-full p-1">
-                  <div className="i-ph:x w-3 h-3 text-gray-400" />
-                </div>
+                <div className="i-ph:x w-3 h-3 text-gray-200" />
               </button>
             </div>
           )}