Merge pull request 'Simplify store item manager rows' (#8) from feature/store-item-manager-cleanup into feature-custom-store-locations

frontend/src/components/manage/StoreAvailableItemsManager.jsx

@@ -195,20 +195,13 @@ export default function StoreAvailableItemsManager({ householdId, store, isAdmin
                 <p className="empty-message">No household items found for this store yet.</p>
               ) : (
                 <div className="store-items-table">
-                  <div className="store-items-table-head" aria-hidden="true">
-                    <span>Item</span>
-                    <span>Store Defaults</span>
-                    <span>Actions</span>
-                  </div>
                   <div className="store-items-table-body">
                     {items.map((item) => {
                       const imageSrc = itemImageSource(item);
-                      const details = [item.item_type, item.item_group, item.zone].filter(Boolean);
 
                       return (
                         <div key={item.item_id} className="store-items-table-row">
                           <div className="store-items-table-cell store-items-table-item">
-                            <span className="store-items-mobile-label">Item</span>
                             <div className="store-available-items-summary">
                               {imageSrc ? (
                                 <img src={imageSrc} alt="" className="store-available-items-thumb" />
@@ -226,19 +219,11 @@ export default function StoreAvailableItemsManager({ householdId, store, isAdmin
                             </div>
                           </div>
 
-                          <div className="store-items-table-cell">
-                            <span className="store-items-mobile-label">Store Defaults</span>
-                            <span className="store-items-defaults-text">
-                              {details.join(" | ") || "No store defaults set"}
-                            </span>
-                          </div>
-
                           <div className="store-items-table-cell store-items-table-actions">
-                            <span className="store-items-mobile-label">Actions</span>
                             <div className="store-available-items-actions">
                               <button
                                 type="button"
-                                className="btn-secondary btn-small"
+                                className="btn-secondary btn-small store-available-items-action"
                                 onClick={() => {
                                   setEditorItem(item);
                                   setShowEditor(true);
@@ -249,7 +234,7 @@ export default function StoreAvailableItemsManager({ householdId, store, isAdmin
                               {isAdmin ? (
                                 <button
                                   type="button"
-                                  className="btn-danger btn-small"
+                                  className="btn-danger btn-small store-available-items-action"
                                   onClick={() => setPendingDeleteItem(item)}
                                 >
                                   Delete Item

frontend/src/styles/components/manage/StoreAvailableItemsManager.css

@@ -60,11 +60,22 @@
   position: sticky;
   top: 0;
   z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
   background: var(--modal-bg);
 }
 
+.store-items-modal-toolbar .btn-small {
+  flex: 0 0 auto;
+  min-height: 40px;
+  white-space: nowrap;
+}
+
 .store-available-items-search {
+  flex: 1 1 auto;
   width: 100%;
+  min-width: 0;
   padding: var(--input-padding-y) var(--input-padding-x);
   border: var(--border-width-thin) solid var(--input-border-color);
   border-radius: var(--input-border-radius);
@@ -92,26 +103,13 @@
   gap: var(--spacing-sm);
 }
 
-.store-items-table-head,
 .store-items-table-row {
   display: grid;
-  grid-template-columns: minmax(220px, 2fr) minmax(180px, 2fr) minmax(170px, 1fr);
+  grid-template-columns: minmax(0, 1fr) auto;
   gap: var(--spacing-md);
   align-items: center;
 }
 
-.store-items-table-head {
-  position: sticky;
-  top: 0;
-  padding: 0 var(--spacing-sm) var(--spacing-xs);
-  background: var(--modal-bg);
-  color: var(--color-text-secondary);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-semibold);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
 .store-items-table-body {
   display: flex;
   flex-direction: column;
@@ -174,11 +172,6 @@
   white-space: nowrap;
 }
 
-.store-items-defaults-text {
-  color: var(--color-text-secondary);
-  font-size: var(--font-size-sm);
-}
-
 .store-items-table-actions {
   justify-self: end;
 }
@@ -190,8 +183,11 @@
   justify-content: flex-end;
 }
 
-.store-items-mobile-label {
+.store-available-items-action {
-  display: none;
+  min-width: 112px;
+  min-height: 36px;
+  border-radius: var(--button-border-radius);
+  padding-inline: var(--spacing-md);
 }
 
 @media (max-width: 720px) {
@@ -200,27 +196,11 @@
     padding: var(--spacing-md);
   }
 
-  .store-items-table-head {
-    display: none;
-  }
-
   .store-items-table-row {
-    display: flex;
+    grid-template-columns: minmax(0, 1fr);
-    flex-direction: column;
-    align-items: stretch;
     gap: var(--spacing-sm);
   }
 
-  .store-items-mobile-label {
-    display: block;
-    margin-bottom: 4px;
-    color: var(--color-text-secondary);
-    font-size: var(--font-size-xs);
-    font-weight: var(--font-weight-semibold);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-  }
-
   .store-items-table-actions {
     justify-self: stretch;
   }

frontend/tests/available-items-catalog.spec.ts

@@ -116,8 +116,27 @@ test("manage stores opens a modal to edit and delete household store items", asy
   await expect(managerModal.getByText("milk", { exact: true })).toBeVisible();
   await expect(managerModal.getByText("apples", { exact: true })).toBeVisible();
   await expect(managerModal.locator(".store-available-items-thumb-placeholder").first()).toHaveText("\uD83D\uDCE6");
+  await expect(managerModal.getByText("Store Defaults")).toHaveCount(0);
+  await expect(managerModal.getByText("No store defaults set")).toHaveCount(0);
 
-  await managerModal.locator(".store-items-table-row").filter({ hasText: "apples" }).getByRole("button", { name: "Edit Settings" }).click();
+  const searchBox = await managerModal.getByPlaceholder("Search household/store items").boundingBox();
+  const addButtonBox = await managerModal.getByRole("button", { name: "Add Item" }).boundingBox();
+  expect(searchBox).not.toBeNull();
+  expect(addButtonBox).not.toBeNull();
+  expect(
+    Math.abs(
+      ((searchBox?.y ?? 0) + (searchBox?.height ?? 0) / 2) -
+      ((addButtonBox?.y ?? 0) + (addButtonBox?.height ?? 0) / 2)
+    )
+  ).toBeLessThan(2);
+
+  const appleRow = managerModal.locator(".store-items-table-row").filter({ hasText: "apples" });
+  const appleEditButton = appleRow.getByRole("button", { name: "Edit Settings" });
+  const milkDeleteButton = managerModal.locator(".store-items-table-row").filter({ hasText: "milk" }).getByRole("button", { name: "Delete Item" });
+  await expect(appleEditButton).toHaveClass(/store-available-items-action/);
+  await expect(milkDeleteButton).toHaveClass(/store-available-items-action/);
+
+  await appleEditButton.click();
   const editorModal = page.locator(".available-item-editor-modal");
   await expect(editorModal).toBeVisible();
   await expect(editorModal.getByLabel("Item Name")).toBeDisabled();
@@ -127,9 +146,9 @@ test("manage stores opens a modal to edit and delete household store items", asy
   await editorModal.getByRole("button", { name: "Save Changes" }).click();
 
   await expect(page.locator(".action-toast.action-toast-success")).toContainText("Updated store item");
-  await expect(managerModal.getByText("produce | Fruits | Produce & Fresh Vegetables")).toBeVisible();
+  await expect(managerModal.getByText("produce | Fruits | Produce & Fresh Vegetables")).toHaveCount(0);
 
-  await managerModal.locator(".store-items-table-row").filter({ hasText: "milk" }).getByRole("button", { name: "Delete Item" }).click();
+  await milkDeleteButton.click();
   const confirmModal = page.locator(".confirm-slide-modal");
   await expect(confirmModal).toBeVisible();
   await expect(confirmModal.getByText("Delete milk?")).toBeVisible();