fix: add spacing before Admin link in blog template#1968
Conversation
The Admin link currently renders directly after the final navigation item as `PostsAdmin`. This adds spacing before the Admin link in the blog template while preserving the existing mobile layout. The change is made in `theme.css` so it can flow to the Cloudflare template through the normal template sync.
|
|
All contributors have signed the CLA ✍️ ✅ |
There was a problem hiding this comment.
This is the right minimal fix for the stated layout problem. In templates/blog/src/layouts/Base.astro the .nav-admin link is a flex sibling that sits directly after .nav-right, so it renders flush against the last nav item. Adding margin-inline-start: var(--spacing-5) via CSS separates it cleanly while using an RTL-safe logical property, and the existing mobile media query already resets margin-inline-start: 0, so the mobile layout is preserved.
I verified the target class exists in both blog templates, that --spacing-5 is defined in tokens.css, and that this change is CSS-only so no changeset or Lingui update is needed. I did not run the test suite, linter, or formatter.
Two things to address before merge:
- Formatting — the new CSS is indented with spaces; this project uses tabs everywhere and
pnpm formatis part of the pre-PR checklist. Run the formatter ontemplates/blog/src/styles/theme.css. - Cloudflare variant —
templates/blog-cloudflare/src/styles/theme.cssstill lacks the rule. Either apply the same addition there or run./scripts/sync-cloudflare-templates.shso the checked-in Cloudflare template is actually fixed, as the PR description implies.
|
|
||
| /* Keep the signed-in Admin link separated from the primary navigation. */ | ||
| .nav-admin { | ||
| margin-inline-start: var(--spacing-5); |
There was a problem hiding this comment.
[needs fixing] The new .nav-admin declaration is indented with two spaces, but the project convention (and .oxfmtrc.json / .prettierrc) is tabs. The whole file is currently spaces, so run pnpm format to convert it rather than committing more space-indented CSS.
| margin-inline-start: var(--spacing-5); | |
| .nav-admin { | |
| margin-inline-start: var(--spacing-5); | |
| } |
| } | ||
|
|
||
| /* Keep the signed-in Admin link separated from the primary navigation. */ | ||
| .nav-admin { |
There was a problem hiding this comment.
[suggestion] This fixes templates/blog, but templates/blog-cloudflare/src/styles/theme.css still has no .nav-admin spacing rule at the PR head. Since the description says the change should flow to the Cloudflare template, either run ./scripts/sync-cloudflare-templates.sh now or apply the same .nav-admin { margin-inline-start: var(--spacing-5); } addition to templates/blog-cloudflare/src/styles/theme.css so the checked-in variant isn't left with the original spacing bug.
|
I have read the CLA Document and I hereby sign the CLA |
Use the repository’s tab-based indentation for the Admin navigation spacing rule.
Apply the same Admin navigation spacing rule to the Cloudflare blog template as requested by the PR review.
Apply the same Admin navigation spacing rule to the Cloudflare blog template as requested by the PR review.
Format the Admin navigation spacing rule with the repository-standard tab indentation in both blog theme.css files. No behavior change.
Match the Cloudflare blog template’s Admin navigation rule to the repository’s tab indentation convention. No behavior change.
Match the Cloudflare blog template’s Admin navigation rule to the repository’s tab indentation convention. No behavior change.
The Admin link currently renders directly after the final navigation item as
PostsAdmin.This adds spacing before the Admin link in the blog template while preserving the existing mobile layout.
The change is made in
theme.cssso it can flow to the Cloudflare template through the normal template sync.What does this PR do?
Fixes the blog template navigation so the signed-in Admin link no longer renders directly after the final menu item as PostsAdmin.
Adds spacing through theme.css while preserving the existing mobile layout. The change can flow to the Cloudflare template through the normal template sync.
Type of change
Checklist
pnpm typecheckpassespnpm lintpassespnpm testpasses (or targeted tests for my change)pnpm formathas been runAI-generated code disclosure