Skip to content

MWPW-200020: Fix Blog Homepage card tags, View all styling, chevron color, and mobile alignment - #644

Open
echen-adobe wants to merge 10 commits into
stagefrom
mwpw-200020-blog-bugs
Open

MWPW-200020: Fix Blog Homepage card tags, View all styling, chevron color, and mobile alignment#644
echen-adobe wants to merge 10 commits into
stagefrom
mwpw-200020-blog-bugs

Conversation

@echen-adobe

Copy link
Copy Markdown
Contributor

Summary

Fixes four Blog Homepage bugs in the blog-posts-v2 block:

  • Card tags — each card now pulls its own post category instead of a hardcoded "Social Media"; the tag pill is omitted when a post has no category.
  • "View all" styling — the control renders as a plain floating‑text link (Milo con‑button background/border/padding neutralized) instead of a button.
  • "View all" chevron — the > uses fill="currentColor" so it inherits the link's accent color (was hardcoded dark #292929).
  • Mobile layout — below 768px the section header stacks and "View all" left‑aligns; the row / space‑between layout is restored at ≥768px.

Jira Ticket

Resolves: MWPW-200020


Test URLs

Draft pages, one per bug (open in DA and hit Preview if .aem.page is stale):

Bug Before (stage code) After (this branch)
1 · card tags https://main--da-express-milo--adobecom.aem.page/drafts/echen/blog-homepage-bug1-card-tags https://mwpw-200020-blog-bugs--da-express-milo--adobecom.aem.page/drafts/echen/blog-homepage-bug1-card-tags?martech=off
2 · view‑all text https://main--da-express-milo--adobecom.aem.page/drafts/echen/blog-homepage-bug2-view-all-text https://mwpw-200020-blog-bugs--da-express-milo--adobecom.aem.page/drafts/echen/blog-homepage-bug2-view-all-text?martech=off
3 · chevron color https://main--da-express-milo--adobecom.aem.page/drafts/echen/blog-homepage-bug3-chevron-color https://mwpw-200020-blog-bugs--da-express-milo--adobecom.aem.page/drafts/echen/blog-homepage-bug3-chevron-color?martech=off
4 · mobile align https://main--da-express-milo--adobecom.aem.page/drafts/echen/blog-homepage-bug4-mobile-align https://mwpw-200020-blog-bugs--da-express-milo--adobecom.aem.page/drafts/echen/blog-homepage-bug4-mobile-align?martech=off

Verification Steps

  • Bug 1 (tags): Open the bug‑1 page. The four posts are intentionally not "Social Media". After: cards show pills Design / Marketing / Education and no pill on the last (empty‑category) post. Before: every card showed a hardcoded Social Media.
  • Bug 2 (view all): After: "View all" is a plain floating‑text link. Before: rendered with a button background/border/padding.
  • Bug 3 (chevron): After: the > matches the link's accent color. Before: hardcoded dark #292929.
  • Bug 4 (mobile): Narrow the viewport below 768px. After: header stacks and "View all" left‑aligns under the heading. Before: "View all" right‑aligned. At ≥768px the row / space‑between layout is unchanged.

Potential Regressions


Additional Notes

  • eslint clean; 33/33 blog-posts-v2 unit tests pass.
  • Four authoring pages added under drafts/echen/ (one per bug) for isolated review.
  • The commit carries its original authorship/date (it originated on a prior worktree branch and was cherry‑picked onto this branch).

🤖 Generated with Claude Code

…ron color, and mobile alignment

- Tags: pull the per-post category through to each card instead of the
  hardcoded 'Social Media' fallback; omit the tag pill when no category.
- View all: neutralize Milo con-button styling so the control renders as a
  plain floating text link (no background/border/padding).
- Chevron: use fill="currentColor" so the '>' inherits the link's accent
  color instead of the hardcoded dark #292929.
- Mobile: stack the section header and left-align View all (column layout
  below 768px), restoring the row/space-between layout at >=768px.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@aem-code-sync

aem-code-sync Bot commented Jul 23, 2026

Copy link
Copy Markdown

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

  • Re-run all PSI checks
  • Re-run failed PSI checks
  • Re-sync branch
Commits

@github-actions github-actions Bot added the Ready for Review Ready for peer review. label Jul 23, 2026
The >=1024px rule capped .blog-posts-v2 at --block-wd-max-width; unset it so the
block spans full width on wide screens (matching the .wide variant).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@aem-code-sync
aem-code-sync Bot temporarily deployed to mwpw-200020-blog-bugs July 23, 2026 17:15 Inactive
@aem-code-sync
aem-code-sync Bot temporarily deployed to mwpw-200020-blog-bugs July 23, 2026 22:45 Inactive
@meganthecoder

Copy link
Copy Markdown
Contributor

@echen-adobe Has this been reviewed by design? Since it's design feedback, it really should get approved by them first before going to CR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants