From 8c9b7d84caf45ce1674861a6c6976c3e88b33084 Mon Sep 17 00:00:00 2001
From: ryan <ryannganga13325@gmail.com>
Date: Mon, 30 Jun 2025 16:26:25 +0300
Subject: [PATCH] feat(ItemsList): enhance table layout to matxh wireframe and
 improve item deletion UI

---
 src/components/ItemsList.tsx | 62 ++++++++++++++++--------------------
 1 file changed, 28 insertions(+), 34 deletions(-)

diff --git a/src/components/ItemsList.tsx b/src/components/ItemsList.tsx
index 8d98601..4f2e75a 100644
--- a/src/components/ItemsList.tsx
+++ b/src/components/ItemsList.tsx
@@ -569,48 +569,42 @@ export function ItemsList({ url }: ItemsListProps) {
     <div className="p-4">
       <h1 className="text-2xl font-bold mb-4">Items List</h1>
       
-      <div className="overflow-x-auto">
-        <table className="min-w-full border-collapse border border-gray-300">
-          <thead>
-            <tr>
-              <th className="border border-gray-300 p-2 bg-gray-100">Property</th>
-              {items.map((item, index) => (
-                <th key={item.id} className="border border-gray-300 p-2 bg-gray-100 relative">
-                  {item.name || `Item ${index + 1}`}
-                  <button
-                    onClick={() => removeItem(index)}
-                    className="absolute top-1 right-1 w-5 h-5 bg-red-500 text-white rounded-full text-xs hover:bg-red-600"
-                    title="Delete item"
-                  >
-                    ×
-                  </button>
-                </th>
-              ))}
-            </tr>
-          </thead>
+      <div className="table-container">
+        <table>
           <tbody>
             {/* Name row */}
             <tr>
-              <td className="border border-gray-300 p-2 font-medium">Name</td>
+              <td className="font-medium">Name</td>
               {items.map((item, index) => (
-                <td key={`name-${item.id}`} className="border border-gray-300 p-2">
-                  <TypeaheadInput
-                    value={item.name}
-                    onInput={(value) => updateItem(index, 'name', value)}
-                    onSelect={(suggestion) => handleWikidataSelect(suggestion, item.id)}
-                    fetchSuggestions={fetchWikidataSuggestions}
-                    onFocus={() => setFocusedItemId(item.id)}
-                    placeholder="Enter item name"
-                  />
+                <td key={`name-${item.id}`}>
+                  <div className="flex items-center gap-2">
+                    <div className="flex-1">
+                      <TypeaheadInput
+                        value={item.name}
+                        onInput={(value) => updateItem(index, 'name', value)}
+                        onSelect={(suggestion) => handleWikidataSelect(suggestion, item.id)}
+                        fetchSuggestions={fetchWikidataSuggestions}
+                        onFocus={() => setFocusedItemId(item.id)}
+                        placeholder="Enter item name"
+                      />
+                    </div>
+                    <button
+                      onClick={() => removeItem(index)}
+                      className="delete-button item-delete"
+                      title="Delete item"
+                    >
+                      ×
+                    </button>
+                  </div>
                 </td>
               ))}
             </tr>
             
             {/* Description row */}
             <tr>
-              <td className="border border-gray-300 p-2 font-medium">Description</td>
+              <td className="font-medium">Description</td>
               {items.map((item, index) => (
-                <td key={`description-${item.id}`} className="border border-gray-300 p-2">
+                <td key={`description-${item.id}`}>
                   <EditableCell
                     value={item.description}
                     onInput={(value) => updateItem(index, 'description', value)}
@@ -628,18 +622,18 @@ export function ItemsList({ url }: ItemsListProps) {
               const propertyLabel = propertyLabels[property] || property;
               return (
                 <tr key={property}>
-                  <td className="border border-gray-300 p-2 font-medium relative">
+                  <td className="font-medium relative">
                     {propertyLabel}
                     <button
                       onClick={() => removeProperty(property)}
-                      className="absolute top-1 right-1 w-5 h-5 bg-red-500 text-white rounded-full text-xs hover:bg-red-600"
+                      className="delete-button property-delete"
                       title="Delete property"
                     >
                       ×
                     </button>
                   </td>
                   {items.map((item, index) => (
-                    <td key={`${property}-${item.id}`} className="border border-gray-300 p-2">
+                    <td key={`${property}-${item.id}`}>
                       <EditableCell
                         value={item.customProperties[property] || ''}
                         onInput={(value) => updateItem(index, property, value)}