feat(F-124): completed feature

project/apps/admin/src/features/products/components/ProductEditor.tsx

@@ -318,44 +318,46 @@ export function ProductEditor({ productId: initialProductId }: ProductEditorProp
               placeholder="Descripción detallada del producto…"
             />
           </div>
-          <div>
-            <div className="flex items-center justify-between mb-3">
-              <label className="text-sm font-semibold text-gray-900">Categorías</label>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <div>
+              <div className="flex items-center justify-between mb-3">
+                <label className="text-sm font-semibold text-gray-900">Categorías</label>
+              </div>
+              <div className="border border-gray-200 rounded-xl p-3 space-y-2 max-h-52 overflow-y-auto">
+                {categories.map(cat => (
+                  <label key={cat.id} className="flex items-center gap-2 cursor-pointer">
+                    <input type="checkbox" checked={categoryIds.includes(cat.id)}
+                      onChange={e => {
+                        if (e.target.checked) setCategoryIds(prev => [...prev, cat.id]);
+                        else setCategoryIds(prev => prev.filter(id => id !== cat.id));
+                      }}
+                      className="rounded text-[#2D6A4F] focus:ring-[#2D6A4F]" />
+                      <span className={`text-sm ${cat.parentId ? 'text-gray-500' : 'font-medium text-gray-700'}`}>
+                        {cat.parentId ? `↳ ${cat.name}` : cat.name}
+                      </span>
+                  </label>
+                ))}
+              </div>
             </div>
-            <div className="border border-gray-200 rounded-xl p-3 space-y-2 max-h-52 overflow-y-auto">
-              {categories.map(cat => (
-                <label key={cat.id} className="flex items-center gap-2 cursor-pointer">
-                  <input type="checkbox" checked={categoryIds.includes(cat.id)}
-                    onChange={e => {
-                      if (e.target.checked) setCategoryIds(prev => [...prev, cat.id]);
-                      else setCategoryIds(prev => prev.filter(id => id !== cat.id));
-                    }}
-                    className="rounded text-[#2D6A4F] focus:ring-[#2D6A4F]" />
-                  <span className={`text-sm ${cat.parentId ? 'text-gray-500' : 'font-medium text-gray-700'}`}>
-                    {cat.parentId ? `↳ ${cat.name}` : cat.name}
-                  </span>
-                </label>
-              ))}
-            </div>
-          </div>
-          <div>
-            <div className="flex items-center justify-between mb-3">
-              <label className="text-sm font-semibold text-gray-900">Atributos</label>
-              <span className="text-xs text-gray-400">{attributes.length} / 16</span>
-            </div>
-            <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
-              {Object.entries(ATTRIBUTE_LABELS).map(([key, label]) => (
-                <button key={key} type="button" onClick={() => toggleAttr(key)}
-                  aria-pressed={attributes.includes(key)}
-                  className={`flex items-center gap-2 px-3 py-2 border rounded-xl cursor-pointer transition-colors text-sm text-left ${
-                    attributes.includes(key)
-                      ? 'border-[#2D6A4F] bg-[#2D6A4F]/5 text-[#2D6A4F]'
-                      : 'border-gray-200 hover:border-gray-300 text-gray-600'
-                  }`}>
-                  <span className={`inline-block w-1.5 h-1.5 rounded-full shrink-0 ${attributes.includes(key) ? 'bg-[#2D6A4F]' : 'bg-gray-300'}`} />
-                  {label}
-                </button>
-              ))}
+            <div>
+              <div className="flex items-center justify-between mb-3">
+                <label className="text-sm font-semibold text-gray-900">Atributos</label>
+                <span className="text-xs text-gray-400">{attributes.length} / 16</span>
+              </div>
+              <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+                {Object.entries(ATTRIBUTE_LABELS).map(([key, label]) => (
+                  <button key={key} type="button" onClick={() => toggleAttr(key)}
+                    aria-pressed={attributes.includes(key)}
+                    className={`flex items-center gap-2 px-3 py-2 border rounded-xl cursor-pointer transition-colors text-sm text-left ${
+                      attributes.includes(key)
+                        ? 'border-[#2D6A4F] bg-[#2D6A4F]/5 text-[#2D6A4F]'
+                        : 'border-gray-200 hover:border-gray-300 text-gray-600'
+                    }`}>
+                    <span className={`inline-block w-1.5 h-1.5 rounded-full shrink-0 ${attributes.includes(key) ? 'bg-[#2D6A4F]' : 'bg-gray-300'}`} />
+                    {label}
+                  </button>
+                ))}
+              </div>
             </div>
           </div>
         </section>