chamomind/eCourt-note
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

6
components/sidebar/AnnotationSidebar.tsx
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}`}>
{hasChildren ? (
// bm-toggle: คอลัมน์นี้เป็น "ตาราง" ของต้นไม้ ต้องกว้าง 14px เท่า spacer
// ของแถวลูกเสมอ — บนจอสัมผัส rule coarse ที่ขยายปุ่มเป็น 32px จะดันไอคอน
// ของแม่ไปชนแนวของลูก (indent 16px หาย) จึงยกเว้นผ่าน class + hit area
// ขยายด้วย ::after แทน (ดู globals.css)
<button
type="button"
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)}
>
{collapsed ? (