fix(sidebar): remove redundant close button from mobile sidebar#1168
Conversation
The sidebar close button is redundant now that the floating action button (FAB), overlay click, and Escape key all close the sidebar. Remove the close button and its associated styles and tests. Fixes #1166 Co-Authored-By: Claude frontend-developer (Haiku) <noreply@anthropic.com> Co-Authored-By: Claude qa-integration-tester (Sonnet) <noreply@anthropic.com> Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
steilerDev
left a comment
There was a problem hiding this comment.
[product-architect]
Clean removal of the redundant sidebar close button. The FAB toggle already provides open/close functionality, so this internal close button was unnecessary duplication.
Verified: component markup, CSS rules (including mobile media query styles), and all related unit tests removed consistently across 4 files. No orphaned references, no architectural concerns.
No findings — would approve if not own PR.
steilerDev
left a comment
There was a problem hiding this comment.
[ux-designer]
Design review: APPROVE (posted as comment — cannot self-approve).
Verified:
- CSS cleanup:
.sidebarHeaderand.closeButtonselectors are fully removed from both the:rootblock and the@media (max-width: 1024px)block. No orphaned selectors remain. The only artifact is one extra blank line between rules, which is harmless. - No visual gap: The
sidebarHeaderdiv was a flex container that only rendered on mobile (display: noneat desktop). Removing it leaves the logo area directly above<nav>, which is the correct visual order. - Accessibility — no regression: All three sidebar-close mechanisms in AppShell are untouched: overlay click (
onClick={handleCloseSidebar}), Escape key (document.addEventListener('keydown', handleEscape)), and FAB (data-testid="menu-fab"). Nothing else in the component tree references the removed class names. - Touch targets: The 44×44px minimum was on the removed close button only. FAB and nav links retain their own touch-target sizing.
- Test hygiene: Tests for the removed button are cleanly deleted. The button-count assertion is corrected from 4 → 3 and the first-button aria-label check now points at the theme toggle. No stale assertions remain.
- Token compliance: No new CSS introduced — nothing to audit.
No findings.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
🎉 This PR is included in version 2.2.0-beta.22 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
…taTable migration - AppShellPage: fix sidebarCloseButton to use FAB (aside close button removed in PR #1168); fix overlay locator to use data-testid="sidebar-overlay" instead of generic div[aria-hidden] - WorkItemsPage/HouseholdItemsPage: fix getWorkItemTitles()/getItemNames() selector from [class*="titleCell"] to [class*="itemLink"] (CSS Modules class from styles.itemLink) - HouseholdItemsPage.clearAreaFilter: use .first() to avoid strict mode violation when DataTable renders two "Clear Filters" buttons (toolbar + empty state) - VendorsPage.openDeleteModal: rewrite to use DataTable actions menu pattern (⋮ button opens a dropdown; delete is a danger menu item, not an aria-labelled standalone button) - UserManagementPage: update emptyState locator from page.getByText(/No users found/) to page.locator('[class*="emptyState"]').first() to match filtered state message - search-users.spec.ts: update empty state assertion to match DataTable filtered message "No items match the current filters" when search is active - vendors.spec.ts: update empty state message assertion (DataTable generic message); fix column headers test (Phone/Email → Contact/Trade after EPIC-18 DataTable migration) - datatable-date-range-picker.spec.ts: use .first() for Clear Filters button to avoid strict mode when DataTable renders it in both toolbar and empty state action - datatable-ux-fixes.spec.ts: same .first() fix for Scenario 2 and Scenario 4 Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com>
…taTable migration (#1177) * fix(e2e): fix remaining test selector and assertion failures after DataTable migration - AppShellPage: fix sidebarCloseButton to use FAB (aside close button removed in PR #1168); fix overlay locator to use data-testid="sidebar-overlay" instead of generic div[aria-hidden] - WorkItemsPage/HouseholdItemsPage: fix getWorkItemTitles()/getItemNames() selector from [class*="titleCell"] to [class*="itemLink"] (CSS Modules class from styles.itemLink) - HouseholdItemsPage.clearAreaFilter: use .first() to avoid strict mode violation when DataTable renders two "Clear Filters" buttons (toolbar + empty state) - VendorsPage.openDeleteModal: rewrite to use DataTable actions menu pattern (⋮ button opens a dropdown; delete is a danger menu item, not an aria-labelled standalone button) - UserManagementPage: update emptyState locator from page.getByText(/No users found/) to page.locator('[class*="emptyState"]').first() to match filtered state message - search-users.spec.ts: update empty state assertion to match DataTable filtered message "No items match the current filters" when search is active - vendors.spec.ts: update empty state message assertion (DataTable generic message); fix column headers test (Phone/Email → Contact/Trade after EPIC-18 DataTable migration) - datatable-date-range-picker.spec.ts: use .first() for Clear Filters button to avoid strict mode when DataTable renders it in both toolbar and empty state action - datatable-ux-fixes.spec.ts: same .first() fix for Scenario 2 and Scenario 4 Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com> * fix(e2e): fix delete modal and actions menu locators after DataTable migration - WorkItemsPage: fix deleteConfirmButton selector from [class*="confirmDeleteButton"] to [class*="btnConfirmDelete"] — delete confirm button uses sharedStyles.btnConfirmDelete, not a page-specific confirmDeleteButton class - HouseholdItemsPage: fix deleteModal from aria-labelledby="#hi-delete-modal-title" (never existed — Modal uses useId() for dynamic IDs) to getByRole('dialog', { name: /delete/i }) - HouseholdItemsPage: fix deleteConfirmButton selector same as WorkItemsPage (btnConfirmDelete) - HouseholdItemsPage: fix openDeleteModal to use button with class menuItemDanger instead of getByRole('menuitem') — the dropdown items are <button> elements, not role="menuitem" - VendorsPage: fix createModalTitle and deleteModalTitle from hardcoded #create-modal-title / #delete-modal-title (Modal uses useId() for dynamic IDs) to heading inside the modal - VendorsPage: fix openDeleteModal to handle mobile viewport (cards layout) in addition to desktop table layout - VendorsPage: fix getVendorNames to check tableContainer.isVisible() before reading table rows, avoiding timeouts when table is CSS display:none on mobile Closes #1095 (partial — remaining DateRangePicker phase reset is a production bug #1178) Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.6) <noreply@anthropic.com> * fix(e2e): fix VendorsPage getVendorNames() mobile card fallback DataTableCard renders the same render() function output inside cardValue spans — no separate cardName class exists. The name column uses vendorLink (Link with styles.vendorLink), which is present in both table cells and cardsContainer cards. Fix the mobile fallback in getVendorNames() to use [class*="vendorLink"] inside cardsContainer instead of the non-existent [class*="cardName"] selector. Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com> * fix(e2e): fix VendorsPage openDeleteModal() mobile card name lookup Mobile openDeleteModal() was looking for [class*="cardName"] to find the vendor in each card. DataTableCard has no cardName class — the name column uses the same render() function as the table row, which produces a Link with styles.vendorLink. Use [class*="vendorLink"] inside each card to match the vendor name, consistent with the getVendorNames() fix. Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com> * test(e2e): guard column settings visibility check by viewport width Column settings button has display:none at max-width:767px in DataTable.module.css (line 662). Dark mode tests on mobile were asserting toBeVisible() unconditionally, causing failures on 375px viewport. - work-items-list.spec.ts: wrap column settings check in width >= 768 guard - household-items-list.spec.ts: same fix - VendorsPage.ts: remove unused sortSelect property (was duplicate of sortOrderButton, both pointing to the same locator — neither used in any test file) Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com> * test(e2e): fix pre-existing assertion and selector failures across multiple specs - WorkItemsPage.getWorkItemTitles(): add tableContainer.isVisible() check before reading table rows; on mobile (max-width:767px), the table has display:none via CSS but elements remain in DOM — iterating them returned unfiltered results and caused textContent timeouts - backup-restore.spec.ts: SettingsSubNav.tsx NavLink elements have role="listitem" (explicitly overriding the default link role), so getByRole('link') never matches; switch to getByRole('listitem') scoped to the settings navigation landmark. Also replace backupTable.waitFor (actionTimeout:5000) with expect().toBeVisible() (expect.timeout:7000) to avoid timing-out on slow CI runners - oidc.spec.ts: Auth Provider column has defaultVisible:false in the user management DataTable; cells[3] is "Member Since" (date), not "OIDC"; update assertions to match the actual visible column layout and remove the hidden-column assertion - dashboard.spec.ts: BudgetSummaryCard renders mediumNetRemaining = average of remainingVsMinPlanned and remainingVsMaxPlanned (37,500 with mock data), not remainingVsActualCost (115,000); fix the expected regex in the budget amount test Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com> * test(e2e): fix SettingsSubNav backup tab assertions for NavLink role override SettingsSubNav.tsx renders NavLink elements with role="listitem" explicitly, overriding the default anchor link role. getByRole('link') and getByRole('listitem', { name: ... }) both fail — the former because the role is overridden, the latter because ARIA listitem role does not compute accessible name from text content. Switch all SettingsSubNav tab assertions to getByText() scoped to the settings navigation landmark. For the member access test, wait for the profile page heading (h1 "Profile") before checking the nav — this ensures the page has rendered after the auth mock triggers an AuthContext re-render. Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com> * test(e2e): fix Create backup test route handler using fallback instead of continue The 'Create backup' test registers a POST route handler before goto() with `route.continue()` in the else branch for non-POST requests. In Playwright, `route.continue()` sends the request directly to the network, bypassing all other registered route handlers. This caused the beforeEach GET mock (which returns the two-backup list) to be skipped — the real server (no BACKUP_DIR) returned 503 instead, and the table never appeared. Fix: use `route.fallback()` in the else branch so non-POST requests fall through to the next matching handler (the beforeEach GET mock) rather than going to the network directly. Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com> * test(e2e): fix dismissCard race condition — wait for preferences PATCH before reload Register the preferences PATCH waitForResponse BEFORE clicking the dismiss button. The UI optimistically removes the card from the DOM immediately on click while the server write may still be in-flight. Prior to this fix, page.reload() in the persistence test could fire before the PATCH completed, causing the server to still have the card in the visible set on the next load — resulting in a flaky "Dismissed card stays hidden after page reload" failure. Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com> * test(e2e): fix auth mock format and mobile card title selector Two fixes for failing E2E tests: 1. backup-restore.spec.ts: The /api/auth/me mock for the member-role test used a flat payload ({ id, role, ... }) instead of the actual API shape ({ user: { ... }, setupRequired, oidcEnabled }). useAuth() reads response.user.role; a flat response causes AuthContext to treat the user as unauthenticated and redirect to /login, so the Profile heading and settings sub-nav were never found. Wrapped mock response in { user: {...}, setupRequired: false, oidcEnabled: false }. 2. WorkItemsPage.ts: getWorkItemTitles() mobile fallback used [class*="cardTitle"] which does not exist in DataTableCard — it has no cardTitle class. DataTableCard renders the same render() function as table rows, so the title Link still has the itemLink CSS Module class. Changed fallback selector to [class*="itemLink"] inside cardsContainer. Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com> * test(e2e): fix vendor search URL test — use waitForURL instead of synchronous check The synchronous expect(page.url()).toContain('q=') fails intermittently on tablet because react-router URL updates from the debounced search can lag slightly after the API response returns. Replace with page.waitForURL() which polls until the URL contains the q= search param. Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com> * test(e2e): fix mobile search race — wait for URL q= param before reading results On mobile (display:none table), waitForLoaded() returns immediately when old cards are already visible, before the filtered results replace them. This caused getWorkItemTitles() to return stale pre-search data with items from parallel workers. Fix: in search(), wait for the URL to include ?q= before waiting for the API response — this confirms the debounce has fired and React state has updated, ensuring waitForLoaded() races against the new results rather than old ones. Symmetric fix applied to clearSearch(): wait for ?q= param to disappear before checking loaded state. Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com> * fix(e2e): fix work-items search tests for mobile/tablet cross-viewport reliability - WorkItemsPage.getWorkItemTitles(): fix mobile card fallback selector from [class*="cardTitle"] to [class*="itemLink"] — DataTableCard has no cardTitle class, it renders the same render() function as table rows which produces itemLink elements - WorkItemsPage: add private waitForSearchParams() helper for URL-based search wait - work-items-list.spec.ts: replace getWorkItemTitles() DOM reads in search tests with expect(getByRole('link')).toBeVisible() — Playwright's built-in retry handles the async gap between API response and React DOM re-render that caused mobile tests to read stale pre-search data; removes page.waitForTimeout(400) anti-pattern Pre-existing failures NOT fixed (separate production bugs): - datatable-date-range-picker.spec.ts: bug #1178 (DateRangePicker phase resets) - datatable-ux-fixes.spec.ts: column drag effectAllowed browser API limitation - i18n-categories.spec.ts: locale contamination (German bleeds into English tests) Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com> * fix(datatable): fix DateRangePicker phase reset on start date selection When user clicked the start date in DateFilter's DateRangePicker, the phase would reset back to 'selecting-start' instead of advancing to 'selecting-end'. This was because DateFilter only called the parent onChange() when both dates were set, causing the startDate prop to DateRangePicker to remain empty and trigger a reset via its useEffect. Solution: Track intermediate dates in local state. DateRangePicker now sees the updated startDate immediately (via local state) even before the parent onChange() is called. The parent onChange() is still only called when both dates are set, maintaining the original filtering behavior. Also syncs local state when the parent value prop changes externally (e.g., when 'Clear Filters' is clicked), ensuring clean reset. Fixes #1095 Co-Authored-By: Claude frontend-developer (Haiku 4.5) <noreply@anthropic.com> * test(e2e): fix 4 remaining E2E test failures on PR #1177 Fix 1 (datatable-ux-fixes.spec.ts): drag-and-drop tests used page.mouse.down/move which does not fire HTML5 drag events. Replaced with page.evaluate() dispatching DragEvents with a real DataTransfer object so the React onDragStart/onDragOver handlers run correctly. The insertion line test uses expect().toBeVisible() with auto-retry to wait for the async React state re-render after dragover. The effectAllowed test reads dataTransfer.effectAllowed synchronously after dispatching dragstart in the same evaluate() call. Fix 2 (i18n-categories.spec.ts): English baseline tests for budget categories and HI categories relied on the default locale without explicitly ensuring i18next was initialized to English. Added setLanguage(page, 'en') before navigation to prevent locale state leakage from parallel German locale tests in the same shard. Fix 3 (dashboard.spec.ts): waitForResponse predicates for the preferences API matched PATCH and GET indiscriminately. Added resp.request().method() === 'GET' filter so the promise resolves on the page load GET (which carries the persisted dismissal state), not an unrelated PATCH from beforeEach or dismiss operations. Fix 4 (WorkItemsPage.ts): search() and clearSearch() now call waitForSearchParams() after the API response to ensure the URL q param has updated and React has committed the filtered data to the DOM. On mobile, waitForLoaded() was resolving immediately (old cards still visible), causing not.toBeVisible() to fail before re-render. Also made waitForSearchParams() public so callers can use it. Fixes #1095 Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com> * test(e2e): revise drag and dashboard tests based on CI feedback Fix drag effectAllowed test: browsers restrict DataTransfer.effectAllowed writes to trusted (user-initiated) drag events only. Synthetic events dispatched via dispatchEvent() are untrusted, so the setter is silently ignored and the value is never 'move'. Changed the test to verify the draggable attribute directly — draggable={index > 0} in the production code is the DOM-level proxy for the intended drag semantics. Also verify the first (pinned) column has draggable="false". Fix dashboard persistence test: two contexts independently fetch GET /api/users/me/preferences on page load (LocaleContext and usePreferences hook). A single waitForResponse captured the first fetch (locale context) before usePreferences had applied hiddenCards, causing the card assertion to fail. Replaced with expect().toHaveCount(0) using Playwright's built-in retry, which polls until the card is removed from the DOM after both fetches and React re-renders complete. Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com> * fix(DateRangePicker): allow clicking dates before start to reset selection The disabled attribute on dates before the start date prevented the intentional click handler logic (lines 175-180) from firing. Dates before start should be clickable to allow resetting the selection to a new start date. Changed disabled logic to visual-only styling: dates before start still have reduced opacity via the dayDisabled CSS class, but are no longer disabled. Fixes the remaining E2E test failures in DateRangePicker date reset flows. Co-Authored-By: Claude frontend-developer (Haiku 4.5) <noreply@anthropic.com> * test(e2e): fix remaining E2E failures — i18n locale timing and vendor cancel test isolation Fix three E2E test failures on PR #1177: 1. i18n.spec.ts — "German text does not overflow navigation sidebar on desktop" Add page.reload() after page.goto() following the established pattern from "Key page headings render in German" test. The SPA may not re-initialize i18next from localStorage until the next full page load after setLanguage(). 2. i18n-categories.spec.ts — all three German locale tests Apply the same page.reload() fix after page.goto() so i18next picks up the German locale from localStorage before asserting translated category names. 3. vendors.spec.ts — "Cancel button closes the modal without creating a vendor" Remove the fragile namesAfter.length === namesBefore.length count assertion. Parallel test workers share the same database, so other tests may create or delete vendors concurrently, making an exact count comparison unreliable. The meaningful assertion (not.toContain('Should Not Be Created')) is retained. Also removes the now-unused namesBefore variable. Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com> * test: update DateRangePicker unit tests for clickable before-start dates Days before the start date during selecting-end phase are no longer disabled (HTML attribute). They now carry only the `dayDisabled` CSS class for visual styling, remaining clickable so users can reset the start date selection. Update three failing assertions across DateRangePicker.test.tsx and DateFilter.test.tsx to reflect this behavior: - `toBeDisabled()` → `not.toBeDisabled()` - Added `toHaveClass('dayDisabled')` where missing - Updated test descriptions to describe the actual (visual) behavior Co-Authored-By: Claude qa-integration-tester (Sonnet 4.5) <noreply@anthropic.com> * test(e2e): fix 4 persistent E2E test failures from PR #1177 CI run - datatable-ux-fixes.spec.ts: add networkidle wait to gotoInvoicesAndWait, guard date button clicks with waitFor, use nth(14) for end date to avoid disabled buttons, assert phase advance via getByText scoped to popover - i18n-categories.spec.ts: add timeout:15000 to first German heading waitFor (trades test is the first cold locale switch; 5s actionTimeout too short) - dashboard.spec.ts: add test.describe.configure({mode:'serial'}) to Card dismiss describe block; register waitForResponse(GET preferences) BEFORE page.reload() to confirm server-side preferences state is loaded before asserting card visibility - WorkItemsPage.ts: rewrite search() and clearSearch() to filter waitForResponse by exact q= URL param so WebKit fill() clear-event does not resolve the wrong response; remove redundant waitForSearchParams Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com> * test(e2e): fix remaining CI failures in dashboard and i18n-categories tests dashboard.spec.ts: replace waitForResponse(GET preferences) with waitForLoadState('networkidle') after page.reload() — the response-based approach resolved on the first preferences GET (LocaleContext) before the second GET (usePreferences hook) applied hiddenCards; networkidle guarantees both fetches and React re-render are complete before asserting card count. Also add timeout:10000 to post-reload heading.waitFor() — the 5s action timeout is too short for SPA initialization after a hard reload. i18n-categories.spec.ts: extend test timeout to 30s for the German trades test (the first cold locale switch in this file). Add networkidle wait after page.reload() to ensure i18next initialization completes before asserting the German heading. The 15s test timeout was being consumed by setLanguage() + goto() + reload() before waitFor() even started. Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com> * test(e2e): fix German i18n-categories test with home-page warm-up pattern The German trades test failed because navigating directly to /settings/manage?tab=trades after setLanguage() left i18next in a cold-start state — the 'de' locale bundle hadn't finished loading, so the heading remained 'Manage' (English) even after 10s. Add a goto('/') + reload() + networkidle warm-up step before navigating to the manage page. This matches the i18n.spec.ts "Key page headings render in German" pattern that reliably loads the German locale in CI. Once i18next has fully initialized on the home page, subsequent navigation within the same SPA session picks up the German locale immediately. Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com> * test(e2e): fix search stability and i18n warm-up WorkItemsPage.search(): add URL-based wait (waitForURL q=query) after fill() and before the response promise — confirms debounce fired and React committed search state to URL before asserting. Remove waitForLoaded() after response to avoid the race where stale DOM rows (from the WebKit clear-event response) satisfy waitForLoaded() before React applies the fresh search results. clearSearch(): same URL-wait pattern. i18n-categories.spec.ts German trades test: wait for home-page German heading ('Projekt') to confirm i18next has initialized in German before navigating to the manage page. This replaces the unreliable networkidle approach. Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com> * test(e2e): simplify German trades test — remove warm-up, increase assertion timeout The home-page warm-up added too many navigations and consumed 15-17s of the 30s test budget, leaving insufficient time for the actual assertion. Revert to the simpler pattern: setLanguage() + goto(MANAGE_TRADES_URL) + reload() + expect.toBeVisible({ timeout: 20s }). This matches the i18n.spec.ts "Key page headings render in German" pattern and fits within the 30s test budget: setLanguage(~5s) + goto(~2s) + reload(~2s) + assertion(up to 20s) = ~29s. Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com> * chore: update E2E agent memory with patterns from PR #1177 fix session Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com> --------- Co-authored-by: Frontend Developer <frontend-developer@cornerstone.local> Co-authored-by: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com>
|
🎉 This PR is included in version 2.2.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Summary
Fixes #1166
Test plan
Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com