frontend/src/components/household/HouseholdSwitcher.jsx

@@ -105,9 +105,6 @@ export default function HouseholdSwitcher() {
                   onClick={() => handleSelect(household)}
                 >
                   <span className="household-option-name">{household.name}</span>
-                  {household.id === activeHousehold.id && (
-                    <span className="check-mark">&#10003;</span>
-                  )}
                 </button>
                 {households.length > 1 && (
                   <div

frontend/src/styles/components/HouseholdSwitcher.css

@@ -71,8 +71,9 @@
   top: calc(100% + 0.5rem);
   left: 0;
   right: auto;
-  min-width: min(280px, calc(100vw - 2rem));
+  width: 100%;
-  width: min(320px, calc(100vw - 2rem));
+  min-width: 100%;
+  max-width: min(320px, calc(100vw - 2rem));
   overflow: hidden;
   background: var(--card-bg);
   border: 2px solid var(--border);
@@ -169,14 +170,6 @@
   cursor: not-allowed;
 }
 
-.check-mark {
-  flex-shrink: 0;
-  margin-left: 0.5rem;
-  color: var(--primary);
-  font-size: 1.1rem;
-  font-weight: bold;
-}
-
 .household-divider {
   height: 1px;
   margin: 0.25rem 0;

frontend/tests/household-selection-persistence.spec.ts

@@ -33,8 +33,8 @@ test("selected household stays active after refreshing on settings and home page
   ];
 
   const storesByHousehold = {
-    1: [{ id: 101, name: "Costco", is_default: true }],
+    1: [{ id: 101, household_store_id: 1001, name: "Costco", is_default: true }],
-    2: [{ id: 201, name: "Trader Joe's", is_default: true }],
+    2: [{ id: 201, household_store_id: 2001, name: "Trader Joe's", is_default: true }],
   };
 
   await page.route("**/households", async (route) => {
@@ -45,8 +45,8 @@ test("selected household stays active after refreshing on settings and home page
     });
   });
 
-  await page.route("**/stores/household/*", async (route) => {
+  await page.route("**/households/*/stores", async (route) => {
-    const householdId = Number(route.request().url().split("/").pop());
+    const householdId = Number(route.request().url().match(/households\/(\d+)\/stores/)?.[1]);
     await route.fulfill({
       status: 200,
       contentType: "application/json",
@@ -56,7 +56,15 @@ test("selected household stays active after refreshing on settings and home page
     });
   });
 
-  await page.route("**/households/*/stores/*/list/recent", async (route) => {
+  await page.route("**/households/*/locations/*/zones", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({ zones: [] }),
+    });
+  });
+
+  await page.route("**/households/*/locations/*/list/recent", async (route) => {
     await route.fulfill({
       status: 200,
       contentType: "application/json",
@@ -64,7 +72,7 @@ test("selected household stays active after refreshing on settings and home page
     });
   });
 
-  await page.route("**/households/*/stores/*/list", async (route) => {
+  await page.route("**/households/*/locations/*/list", async (route) => {
     await route.fulfill({
       status: 200,
       contentType: "application/json",
@@ -84,8 +92,20 @@ test("selected household stays active after refreshing on settings and home page
 
   await expect(page.getByRole("button", { name: "Alpha Home" })).toBeVisible();
 
-  await page.getByRole("button", { name: "Alpha Home" }).click();
+  const householdTrigger = page.locator(".household-switcher-toggle");
-  await page.getByRole("button", { name: "Bravo Home" }).click();
+  await expect(householdTrigger).toContainText("Alpha Home");
+  await householdTrigger.click();
+  const householdDropdown = page.locator(".household-switcher-dropdown");
+  await expect(householdDropdown).toBeVisible();
+  await expect(page.locator(".check-mark")).toHaveCount(0);
+
+  const triggerBox = await householdTrigger.boundingBox();
+  const dropdownBox = await householdDropdown.boundingBox();
+  expect(triggerBox).not.toBeNull();
+  expect(dropdownBox).not.toBeNull();
+  expect(Math.abs((dropdownBox?.x ?? 0) - (triggerBox?.x ?? 0))).toBeLessThan(1);
+
+  await page.getByRole("button", { name: "Bravo Home", exact: true }).click();
 
   await expect(page.getByRole("button", { name: "Bravo Home" })).toBeVisible();
   await expect.poll(() => page.evaluate(() => localStorage.getItem("activeHouseholdId"))).toBe("2");