feat(layout): standardize page layout with PageContainer + PageHeader#1160
Merged
timothyfroehlich merged 8 commits intomainfrom Apr 8, 2026
Merged
feat(layout): standardize page layout with PageContainer + PageHeader#1160timothyfroehlich merged 8 commits intomainfrom
timothyfroehlich merged 8 commits intomainfrom
Conversation
…xw.8) Introduces two new shared layout primitives: - PageContainer: consistent max-width, padding, spacing via size prop (narrow/standard/wide/full) - PageHeader: title h1, optional breadcrumbs, titleAdornment, and actions slot Migrates all applicable pages to use these components: - App pages: Dashboard (adds missing title), Issues, Machines list, Machine detail, New Machine, Settings, Admin Users, Report - Content pages (Card-wrapped): Help, About, What's New, Help Admin, Privacy, Terms Removes per-page inline wrapper divs and header markup. Tests added for both components. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…rt form - Remove breadcrumbs from PageHeader (kept for future issue detail only) - Increase title to text-3xl, reduce header padding to pb-2 - Split PageContainer padding to pt-6 pb-10 - Shrink Add Machine button to default sizing - Move WatchMachineButton from page header to issues expando section - Restyle watch button: ghost variant, bell icons, tooltips, no mode label - Remove status badge from machine detail header (already shown below) - Remove Card wrapper from report form to match app page pattern - Update tests to match new padding and removed breadcrumbs Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Updates to Preview Branch (feat/page-layout-standardization) ↗︎
Tasks are run on every commit but only new migration files are pushed.
View logs for this Workflow Run ↗︎. |
Contributor
There was a problem hiding this comment.
Pull request overview
Standardizes app page structure by introducing reusable layout primitives (PageContainer, PageHeader) and migrating pages to consistent patterns, while also adjusting a few page-specific UI elements (notably machine watching and the report form).
Changes:
- Added
PageContainer(size tiers) andPageHeader(title + optional adornments/actions) components with unit tests. - Migrated multiple pages to use
PageContainer/PageHeaderand updated several “content” pages to a Card-wrapped layout. - Updated machine watching UI (bell-style button + tooltips) and moved it into the machine issues section; adjusted report form layout to match the new page pattern.
Reviewed changes
Copilot reviewed 21 out of 21 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/components/machines/WatchMachineButton.tsx | Restyles watch control to bell-themed ghost button with tooltips + dropdown. |
| src/components/layout/PageHeader.tsx | Adds a reusable page header component (title + optional adornment/actions). |
| src/components/layout/PageHeader.test.tsx | Adds tests for PageHeader rendering and className merging. |
| src/components/layout/PageContainer.tsx | Adds a reusable max-width + spacing page container with size variants. |
| src/components/layout/PageContainer.test.tsx | Adds tests for PageContainer sizing and base padding/spacing classes. |
| src/app/report/unified-report-form.tsx | Removes Card wrapper and reshapes layout to fit the new page shell pattern. |
| src/app/report/page.tsx | Switches report page shell to PageContainer + PageHeader. |
| src/app/(app)/whats-new/page.tsx | Converts “What’s New” to PageContainer + Card-wrapped content. |
| src/app/(app)/terms/page.tsx | Wraps Terms page content in PageContainer (narrow). |
| src/app/(app)/settings/page.tsx | Standardizes Settings page shell using PageContainer + PageHeader. |
| src/app/(app)/privacy/page.tsx | Wraps Privacy page content in PageContainer (narrow). |
| src/app/(app)/m/page.tsx | Standardizes Machines list page layout and header actions via PageHeader. |
| src/app/(app)/m/new/page.tsx | Standardizes New Machine page shell using PageContainer + PageHeader. |
| src/app/(app)/m/[initials]/page.tsx | Updates machine detail header and moves watch control into issues section. |
| src/app/(app)/m/[initials]/issues-expando.tsx | Adds optional watchButton slot in the issues expando summary row. |
| src/app/(app)/issues/page.tsx | Standardizes Issues page shell using PageContainer + PageHeader. |
| src/app/(app)/help/page.tsx | Moves Help landing content into a Card within PageContainer. |
| src/app/(app)/help/admin/page.tsx | Moves Admin Help content into a Card within PageContainer. |
| src/app/(app)/dashboard/page.tsx | Standardizes Dashboard page shell using PageContainer + PageHeader. |
| src/app/(app)/admin/users/page.tsx | Standardizes Admin Users page shell using PageContainer + PageHeader. |
| src/app/(app)/about/page.tsx | Moves About content into a Card within PageContainer. |
- Extract shared icon/tooltip variables, eliminate duplicated TooltipProvider - Remove unnecessary arrow wrappers on onClick handlers - Remove dead onKeyDown handler on non-focusable span in IssuesExpando - Fix empty-state button on machines page to match header button sizing Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…te button, null-safe actions - Add preventDefault to watch button wrapper in IssuesExpando to prevent summary toggle when clicking the watch button - Restore Invite User button on admin/users page (was lost when UserManagementHeader was replaced with PageHeader) - Use != null instead of !== undefined for actions guard in PageHeader - Add test for null actions case Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The "Showing X of Y issues" indicator was accidentally removed when migrating the issues page to PageHeader. E2E tests depend on this text and it's useful UX feedback for filtered views. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Radix Tooltip + DropdownMenu both using asChild on the same element creates a fragile ref-forwarding chain. Tooltip is only needed on the unwatched state (where it explains what Watch does). The watched state has the dropdown menu itself for context. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The page title was changed from "Add New Machine" to "New Machine" during the PageHeader migration. Two E2E tests still referenced the old heading text. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
PageContainer(width tiers: narrow/standard/wide/full) andPageHeader(title + optional badges + actions) componentsWatchMachineButtonas ghost bell toggle with tooltips, move from page header to issues sectionTest plan
pnpm run check)🤖 Generated with Claude Code