Improve article utility targets

Author: oiahoon

docs/agent/design-system.md

@@ -44,6 +44,7 @@ Read this for visual design, spacing, theme behavior, icons, animation, and UI c
 - Offline and status pages should surface the state promptly instead of centering it deep in the viewport.
 - Mobile header controls and menu items should keep comfortable touch targets without adding explanatory UI copy.
 - Inline utility links on mobile should have a larger hit area while retaining the quiet text style.
+- Article utility navigation should keep quiet typography but provide a practical tap area.
 - Mobile menus must stack above photography and homepage media in both normal and locked-dark pages.
 - Long archive and tag lists should use native browser containment or lazy media loading before adding client-side behavior.
 

docs/improvement-progress.md

@@ -75,6 +75,9 @@
 - 进行：Round 19 基于 About 手机外链指标，定位到 Elsewhere 链接命中高度只有 `18px`。
 - 完成：About 行内工具链接增加 `2rem` 最小高度，版本号提升到 `0.0.20`，保持安静文字样式。
 - 验证：Round 19 GitHub、Weibo、RSS、Email 链接命中高度提升到 `32px`，390px 与 1440px 下无横向溢出；`npm run check:content-health`、`npm run build`、`git diff --check` 通过。
+- 进行：Round 20 基于文章详情工具链接指标，定位到顶部返回链接命中高度只有 `20px`。
+- 完成：文章返回链接和标签工具链接增加 `2rem` 最小高度，版本号提升到 `0.0.21`，保留安静内联样式。
+- 验证：Round 20 文章返回链接为 `159x32`，标签链接高度为 `32px`，正文入口仍保持在手机 `605px`；`npm run check:content-health`、`npm run build`、`git diff --check` 通过。
 
 ### 2026-02-26
 - 完成：建立执行版改进计划，按“文档基线 -> 技术债 -> UI/UX”重排优先级。
@@ -98,5 +101,5 @@
 - 质量校验命令：`npm run check:docs-baseline`
 - 内容治理命令：`npm run check:content-health`
 - 安全校验命令：`npm run check:security`
-- 最近结果：`189 page(s) built in 1.36s`，`content health: 0 errors / 0 warnings`，`about utility links at 32px hit height`，`audit: 5 remaining vulnerabilities requiring breaking --force fixes`
+- 最近结果：`189 page(s) built in 1.36s`，`content health: 0 errors / 0 warnings`，`article utility links at 32px hit height`，`audit: 5 remaining vulnerabilities requiring breaking --force fixes`
 - 最近验证日期：2026-06-23

docs/uiux-20-round-log.md

@@ -2,6 +2,40 @@
 
 This log tracks the repeated screenshot-led UI/UX improvement rounds for Joey's Notes.
 
+## Round 20 - 2026-06-23 - Article Utility Link Hit Areas
+
+Evidence:
+
+- Baseline measurement: article detail top back link measured `20px` high on mobile.
+- Final screenshots: `/private/tmp/oiahoon-uiux-round-20-after/`
+- Reviewed route: `/posts/2026-05-01-agentic-coding-context-system/`
+- Viewports: `390x844`, `1440x900`
+
+Findings:
+
+- Article detail layout had no horizontal overflow after the earlier header-density work.
+- The top back link and article tag utility links used quiet inline sizing that was smaller than the recent mobile target improvements.
+- These utility links should remain understated but easier to tap.
+
+Changes:
+
+- Added a `2rem` minimum height to article back links and article tag links.
+- Preserved existing labels, icons, spacing rhythm, and article body layout.
+- Bumped the app version to `0.0.21`.
+- Added an agent design-system note for practical tap areas on article utility navigation.
+
+Validation plan:
+
+Results:
+
+- Final screenshots: `/private/tmp/oiahoon-uiux-round-20-after/`
+- Top article back link now measures `159x32`; article tag links also measure `32px` high.
+- Mobile article body still enters at `proseTop=605px`; no horizontal overflow or offscreen offenders at `390x844` or `1440x900`.
+- `npm run check:content-health`: passed, 120 posts scanned, 0 errors, 0 warnings.
+- `npm run build`: passed, 189 pages built in 1.36s.
+- `git diff --check`: passed.
+- `npm run check:security`: still reports the same 5 remaining vulnerabilities that require breaking `npm audit fix --force`.
+
 ## Round 19 - 2026-06-23 - About Utility Link Hit Areas
 
 Evidence:

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "joey-notes-astro",
   "type": "module",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",

package.json

@@ -259,6 +259,7 @@ const structuredData = generateBlogPostStructuredData({
     .article-back-link,
     .article-tag-link {
       display: inline-flex;
+      min-height: 2rem;
       align-items: center;
       gap: 0.4rem;
     }