nalalangan/grocery-app
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

style: align household dropdown menu

Browse Source
This commit is contained in:
Nico 2026-05-26 01:30:40 -07:00
parent 467ad2b036
commit f491826a05
3 changed files with 31 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/household/HouseholdSwitcher.jsx
View File

@ -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

13
frontend/src/styles/components/HouseholdSwitcher.css
View File

@ -71,8 +71,9 @@
top: calc(100% + 0.5rem);
left: 0;
right: auto;
min-width: min(280px, calc(100vw - 2rem));
width: min(320px, calc(100vw - 2rem));
width: 100%;
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;

36
frontend/tests/household-selection-persistence.spec.ts
View File

@ -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 }],
2: [{ id: 201, name: "Trader Joe's", is_default: true }],
1: [{ id: 101, household_store_id: 1001, name: "Costco", 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) => {
const householdId = Number(route.request().url().split("/").pop());
await page.route("**/households/*/stores", async (route) => {
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();
await page.getByRole("button", { name: "Bravo Home" }).click();
const householdTrigger = page.locator(".household-switcher-toggle");
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");