Fix Portfolio archive template, mobile menu, and header UI issues - #17
Merged
Conversation
…m design - Rename templates/page-work-archive.html to templates/archive-project.html so it matches the `project` CPT archive slot in the template hierarchy - Remove the now-unneeded "page-work-archive" entry from customTemplates in theme.json
- Override core Navigation's hardcoded #fff/#000 overlay background and text with the theme's adaptive surface/text tokens, so the drawer follows dark mode instead of staying stuck on light-mode values - Match core's own selector specificity so the overrides actually win over core's fallback rules - Remove the stray heading-font override on the flat link rows (Systems, Contact) so they match the accordion rows' font, fixing the apparent uneven padding - Change the drawer's group layout from "constrained" to "flow" so accordion rows and link rows no longer diverge at wider (desktop editor) canvas widths - Reapply the side padding lost from that layout change directly, using the same spacing token as the header
- Revert header markup restructuring that fixed hamburger centering but broke desktop nav spacing as a side effect - Add a breakpoint-scoped override (max-width matching the nav's own mobileMenuBreakpoint) so the collapsed hamburger docks next to the actions group, leaving desktop untouched - Zero out the root blockGap's margin-top on whatever section follows the header, since it was stacking with the header's own bottom padding and made the gap below look uneven against the top
brandonmarshal
added
area:navigation
|
Note
|
| Layer / File(s) | Summary |
|---|---|
Mobile navigation layout and styling parts/mobile-menu.html, src/scss/animations/_mobile-menu-motion.scss, assets/css/animations.css |
The mobile menu uses flow layout, explicit side padding, adaptive overlay colors, and inherited body typography. |
Responsive header spacing and navigation positioning src/scss/animations/_header-motion.scss, assets/css/animations.css |
The header removes following-section top margin and positions collapsed navigation toward the actions group below 1024px. |
Project archive template integration templates/archive-project.html, theme.json |
The project archive template includes header and footer parts around the work archive pattern. The previous custom page template entry is removed. |
Estimated code review effort: 3 (Moderate) | ~20 minutes
Possibly related PRs
- lightspeedwp/ls-theme#13: Both changes adjust responsive header and navigation behavior.
- lightspeedwp/ls-theme#15: Both changes modify Work Archive template setup and shared header styles.
- lightspeedwp/ls-theme#16: Both changes modify the mobile menu template and motion styles.
Suggested reviewers: zaredrogers
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title clearly summarizes the archive template, mobile menu, and header UI changes in the pull request. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
| Linked Issues check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
| Out of Scope Changes check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
- Create stacked PR
- Commit on current branch
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Commit unit tests in branch
fix/pattern-simple-ui-adjustments
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands.
|
Tick the box to add this pull request to the merge queue (same as
|
There was a problem hiding this comment.
Pull request overview
This PR fixes the project/portfolio archive template resolution and several header/mobile navigation UI issues (dark-mode readability, alignment, and spacing) in the LightSpeed block theme.
Changes:
- Aligns the project CPT archive template with WordPress’ template hierarchy and removes the now-unused custom template registration.
- Fixes mobile navigation drawer dark-mode contrast by overriding core’s hardcoded overlay colours with existing adaptive theme tokens, and restores consistent mobile-menu padding after switching layout type.
- Adjusts header spacing and collapsed navigation alignment on smaller breakpoints, including removing the extra “below header” gap caused by block-gap margin stacking.
Reviewed changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
theme.json |
Removes the unused page-work-archive entry from customTemplates after the template hierarchy change. |
templates/archive-project.html |
Adds the correct archive-project template to ensure the project CPT archive uses the intended design pattern. |
src/scss/animations/_mobile-menu-motion.scss |
Adds explicit mobile-menu padding and overrides core Navigation overlay background/text colours with adaptive tokens; removes link-row font override for consistency. |
src/scss/animations/_header-motion.scss |
Removes the first-post-header block-gap margin and repositions collapsed navigation next to the actions group at the intended breakpoint. |
parts/mobile-menu.html |
Switches the mobile menu Group layout to flow to avoid editor-width centring quirks. |
assets/css/animations.css |
Compiled CSS output reflecting the SCSS updates above. |
ZaredRogers
approved these changes
Aug 3, 2026
ZaredRogers
left a comment
ZaredRogers
left a comment
Contributor
There was a problem hiding this comment.
Looks good @brandonmarshal
5 tasks
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
/portfoliowas rendering the genericarchive.htmlinstead of its custom design — renamedtemplates/page-work-archive.htmltotemplates/archive-project.htmlso it matches theprojectCPT in the template hierarchy, and removed the now-unusedcustomTemplatesentry fromtheme.json.#fff/#000fallback when no background/text color is set) — overridden with the theme's existing adaptive tokens, matching core's own selector specificity so the override actually applies.Test plan
Static checks:
npm run lint:json— passednpm run schema:validate— passednpm run build:css— compiles cleanly, output matches source with no stray diffVerified live on a local WordPress instance:
/portfoliorenders the custom template instead of the generic archive🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Improvements