feat(layout): standardize list page layout across 8 pages

[steilerDev]

Summary

Implemented standardized 1200px max-width layout across 8 list pages (BudgetOverviewPage, BudgetSourcesPage, SubsidyProgramsPage, InvoicesPage, VendorsPage, WorkItemsPage, HouseholdItemsPage, MilestonesPage) with shared CSS classes and consistent button text.

Changes

• Shared CSS Classes: Added .pageContainer, .pageContent, .pageHeader, .pageTitle to shared.module.css with responsive behavior (max 1200px width, 44px touch targets on mobile, consistent padding across breakpoints)
• CSS Composition: All 8 pages now compose layout classes from shared module instead of duplicating styles
• Max-width Standardization: Updated pages with 1400px or no max-width constraint to 1200px
• Button Consolidation: Moved "New Source" button in BudgetSourcesPage from section header to page header; added "New Subsidy Program" button to SubsidyProgramsPage page header
• Button Text Standardization: Changed button text from "Add" to "New" (e.g., "Add Vendor" → "New Vendor")
• Content Wrapping: Wrapped page content in .content divs for 5 pages (InvoicesPage, VendorsPage, WorkItemsPage, HouseholdItemsPage, MilestonesPage)
• Translation Keys: Fixed hardcoded strings in SubsidyProgramsPage to use i18n (t('subsidies.pageTitle'), t('subsidies.newSubsidyProgram'), etc.)
• New Translation Key: Added subsidies.pageTitle ("Budget") for SubsidyProgramsPage heading

Test Plan

• Desktop (1025px+): All 8 pages display with consistent 1200px max-width, full-size buttons in page header
• Tablet (768-1024px): Padding reduced to 6px, buttons 44px minimum height (touch targets)
• Mobile (max 767px): Padding reduced to 4px, page header stacks vertically (h1 + button full width, 44px height)
• Dark mode: Verify all pages render correctly with dark theme
• Accessibility: Verify keyboard navigation works for all buttons; check aria-labels on toggles/menus

Generated with Claude Code

[steilerDev]

[product-architect]

Reviewed -- no architectural issues found. Would approve if this were not my own PR.

Verified:

• Shared class extraction: The four new classes in shared.module.css (.pageContainer, .pageContent, .pageHeader, .pageTitle) follow the existing shared component pattern. All values use design tokens. Responsive breakpoints and prefers-reduced-motion are handled centrally.
• CSS Modules composition: All 8 pages correctly use composes: to inherit from shared classes, eliminating duplicated layout rules. Local class names preserved for page-specific overrides.
• Max-width standardization: Household items and vendors pages move from 1400px to 1200px, matching the rest of the app.
• Button class consolidation: Pages now use the existing sharedStyles.btnPrimary instead of local .button styles.
• i18n compliance: Hardcoded strings in SubsidyProgramsPage replaced with t() calls. German translations updated.
• Test coverage: Unit tests updated for renamed button text. New E2E spec covers all 8 pages for layout consistency.

No schema, API, or architectural changes -- no wiki updates needed.

[steilerDev]

[ux-designer]

Approved. The implementation correctly matches the visual spec from Issue #1142.

Verified:

• shared.module.css — four new classes (pageContainer, pageContent, pageHeader, pageTitle) are correct: max-width: 1200px, all spacing/typography values use tokens, breakpoints at 767px / 768px–1023px with non-overlapping bounds
• All 8 pages (WorkItemsPage, HouseholdItemsPage, InvoicesPage, MilestonesPage, BudgetOverviewPage, BudgetSourcesPage, SubsidyProgramsPage, VendorsPage) use composes: to reference the shared classes — no local duplicates
• Mobile responsive: pageHeader stacks to column, buttons get min-height: 44px and width: 100% (touch targets met), title shrinks to --font-size-2xl
• prefers-reduced-motion guard present on all four layout classes
• Button labels updated to "New ..." pattern in both en and de locales — consistent across all pages
• BudgetSourcesPage.tsx switches inline className={styles.button} to sharedStyles.btnPrimary — correct reuse of shared button class
• No hardcoded colors anywhere in the diff; all layout values either use tokens or are structural constants (max-width: 1200px has no token equivalent and is acceptable as a named layout constant)
• Dark mode: no new color declarations in any page module, so dark mode is fully inherited from the token system

No findings.

[steilerDev]

[product-owner]

PR Review: Issue #1142 — Standardize List Page Layout

All 9 acceptance criteria verified against the diff. APPROVED (posting as comment due to repo permissions).

AC Verification

AC	Status	Evidence
1. All 8 list pages use 1200px max-width	PASS	All 8 pages compose pageContainer from shared.module.css (max-width: 1200px). Pages previously at 1400px (Vendors, WorkItems, HouseholdItems, Milestones) corrected.
2. Shared page layout styles, no duplication	PASS	shared.module.css defines .pageContainer, .pageContent, .pageHeader, .pageTitle with responsive breakpoints. All 8 pages use CSS composes.
3. All creation buttons use "New ..." text	PASS	EN translations updated: "New Source", "New Vendor", "New Invoice", "New Subsidy Program", "New Work Item", "New Household Item", "New Milestone". DE in parallel.
4. Budget Sources button moved to page header	PASS	Button moved from section header (below BudgetSubNav) into .pageHeader alongside h1.
5. Subsidies gets "New Subsidy Program" button	PASS	Button added in .pageHeader using t('subsidies.addProgram') = "New Subsidy Program". Hardcoded strings replaced with i18n keys.
6. Household Items: "New Household Item"	PASS	t('newButton') = "New Household Item".
7. Budget Overview dropdown: "New" trigger	PASS	addButton = "New"; addInvoice = "New Invoice"; addVendor = "New Vendor". Tests verify menuitem roles.
8. Mobile responsive consistency	PASS	Shared CSS includes mobile breakpoint with column layout, 44px touch targets, reduced padding. Per-page overrides removed.
9. No page defines its own max-width/wrapper	PASS	All 8 page CSS modules replaced inline styles with composes from shared module.

Additional Observations (non-blocking, informational)

• Bonus: i18n cleanup — SubsidyProgramsPage hardcoded English strings replaced with t() calls. Good catch.
• Bonus: InvoicesPage filter cleanup — Removed unused date/dueDate filter params. Minor scope extension but reasonable.

[github-actions]

🎉 This PR is included in version 2.2.0-beta.17 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 2.2.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀