sidebar: แก้ไอคอน bookmark root ตรงแนวกับ sub บนจอสัมผัส — chevron ต้นไม้คง 14px + ขยาย hit area ผ่าน ::after (bug report 2026-09-22)

rule coarse ที่ขยายปุ่ม icon ใน sidebar เป็น 32px (aside[data-sidebar]
button.shrink-0 — กันจิ้มพลาด) ดันปุ่ม chevron หุบ/กางหน้าแถว root จาก 14px
เป็น 32px จนไอคอน bookmark ของ root ไปชนแนวไอคอนของ sub พอดี (indent 16px
ต่อระดับโดนกิน — ลำดับชั้นต้นไม้มองไม่เห็น) และ root ที่มีลูก (chevron) กับ
ไม่มีลูก (spacer w-3.5) ก็เพี้ยนไม่ตรงแนวกันเอง

แก้ด้วย class bm-toggle ยกเว้นจาก rule: คงขนาดจริง 14px เท่า spacer ของแถวลูก
(คอลัมน์ต้นไม้ต้องเท่ากันทุกระดับ) + ขยาย hit area เป็น 32px ด้วย ::after
แบบเดียวกับ sel-handle — จิ้มสบายเท่าเดิมโดยไม่จอง layout width

รวม sync .claude/rules/pdf-viewer.md ของงานวันนี้ทั้งสองชุด: ข้อยกเว้น bm-toggle,
ชื่อ tool "เลือก" (2 จุด), และข้อยกเว้น markMenuClosed ของการปิดเมนูแถวเดี่ยว
(จาก commit ก่อนหน้า)

verify บน iPad emulation กับไฟล์จริง (f186d933…): ไอคอน root ทุกแถวตรงแนว
กันเป๊ะ (spread 0px), sub เยื้อง 17px จาก root, chevron คง 14px, ::after ±9px;
desktop ไม่กระทบ (rule อยู่ใต้ @media pointer: coarse เท่านั้น); tsc ผ่าน

Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
Your Name 2026-09-22 11:49:08 +07:00
parent 357f3e972f
commit 3a06557bd4
3 changed files with 31 additions and 5 deletions

File diff suppressed because one or more lines are too long

View file

@ -166,6 +166,28 @@
justify-content: center; justify-content: center;
} }
/* ─── ยกเว้น chevron หุบ/กางของต้นไม้ bookmark (bug report 2026-09-22) ──────
คอลัมน์นี้เป็น "ตาราง" ของต้นไม้ ต้องกว้างเท่าไอคอน 14px เท่ากับ spacer
(w-3.5) ของแถวลูกเสมอ — ถ้าปล่อย min-width 32px ดันไอคอน bookmark ของ
หัวข้อแม่ไปชนแนวพอดีกับของหัวข้อลูก (indent 16px/ระดับโดนกิน) ลำดับ
ชั้นมองไม่เห็น และ root มีลูก (chevron) กับไม่มีลูก (spacer) ก็เพี้ยน
ไม่ตรงแนวกันเอง — จึงคงขนาดจริง 14px แล้วขยาย hit area ด้วย ::after
แบบเดียวกับ sel-handle (จิ้มสบาย 32px เท่าเดิม โดยไม่จอง layout) */
aside[data-sidebar] button.bm-toggle {
min-height: 0;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
aside[data-sidebar] button.bm-toggle::after {
content: "";
position: absolute;
/* ขยาย hit รอบไอคอน 14px เป็น 32px (±9px) โดยไม่กว้างขึ้นจริง */
inset: -0.5625rem;
}
/* M6: ตัด double-tap zoom ของ browser เมื่อแตะปุ่มรัว ๆ (ยัง pinch ได้ตามปกติ — /* M6: ตัด double-tap zoom ของ browser เมื่อแตะปุ่มรัว ๆ (ยัง pinch ได้ตามปกติ —
handle ของกรอบ selection เป็น div + touch-none อยู่แล้ว ไม่โดน rule นี้) */ handle ของกรอบ selection เป็น div + touch-none อยู่แล้ว ไม่โดน rule นี้) */
button, button,

View file

@ -808,10 +808,14 @@ export default function AnnotationSidebar({
) : ( ) : (
<div className={`group flex items-center gap-1.5 rounded py-1 hover:bg-slate-100 ${pad}`}> <div className={`group flex items-center gap-1.5 rounded py-1 hover:bg-slate-100 ${pad}`}>
{hasChildren ? ( {hasChildren ? (
// bm-toggle: คอลัมน์นี้เป็น "ตาราง" ของต้นไม้ ต้องกว้าง 14px เท่า spacer
// ของแถวลูกเสมอ — บนจอสัมผัส rule coarse ที่ขยายปุ่มเป็น 32px จะดันไอคอน
// ของแม่ไปชนแนวของลูก (indent 16px หาย) จึงยกเว้นผ่าน class + hit area
// ขยายด้วย ::after แทน (ดู globals.css)
<button <button
type="button" type="button"
aria-label={collapsed ? `กางหัวข้อ ${b.title}` : `หุบหัวข้อ ${b.title}`} aria-label={collapsed ? `กางหัวข้อ ${b.title}` : `หุบหัวข้อ ${b.title}`}
className={`shrink-0 text-slate-500 hover:text-slate-600 ${FOCUS_RING_CLS}`} className={`shrink-0 bm-toggle text-slate-500 hover:text-slate-600 ${FOCUS_RING_CLS}`}
onClick={() => toggleCollapsed(b.id)} onClick={() => toggleCollapsed(b.id)}
> >
{collapsed ? ( {collapsed ? (