From 13c4b515d7233e7551e3579da005849ba12e35cf Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Wed, 25 Mar 2026 14:41:17 +0800
Subject: [PATCH] fix(docs): widen API drawer and fix TOC scroll hijacking
 window

- Add .api-drawer (1100px) so content area is ~880px instead of ~540px
- Replace scrollIntoView with apiDocContent.scrollBy to avoid scrolling
  the window and collapsing the drawer layout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/html/api-doc-drawer.html | 2 +-
 web/js/docs.js               | 9 +++++----
 web/styles.css               | 4 ++++
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/web/html/api-doc-drawer.html b/web/html/api-doc-drawer.html
index 0dbb319..c85a51a 100644
--- a/web/html/api-doc-drawer.html
+++ b/web/html/api-doc-drawer.html
@@ -1,5 +1,5 @@
 <div class="drawer-backdrop hidden" id="apiDocDrawer">
-  <aside class="drawer" role="dialog" aria-modal="true" aria-labelledby="apiDocTitle">
+  <aside class="drawer api-drawer" role="dialog" aria-modal="true" aria-labelledby="apiDocTitle">
     <div class="drawer-head">
       <h3 id="apiDocTitle">API.md</h3>
       <button type="button" class="secondary" id="closeApiDoc">关闭</button>
diff --git a/web/js/docs.js b/web/js/docs.js
index c30741b..f8e08e6 100644
--- a/web/js/docs.js
+++ b/web/js/docs.js
@@ -103,10 +103,11 @@ export async function loadApiDoc() {
       if (!id) {
         return;
       }
-      dom.apiDocContent.querySelector(`#${CSS.escape(id)}`)?.scrollIntoView({
-        behavior: "smooth",
-        block: "start",
-      });
+      const target = dom.apiDocContent.querySelector(`#${CSS.escape(id)}`);
+      if (target) {
+        const offset = target.getBoundingClientRect().top - dom.apiDocContent.getBoundingClientRect().top;
+        dom.apiDocContent.scrollBy({ top: offset, behavior: "smooth" });
+      }
     });
   });
 
diff --git a/web/styles.css b/web/styles.css
index e9748c7..95cabb5 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -968,6 +968,10 @@ button.danger:hover { background: var(--danger-hover); }
   grid-template-columns: 220px minmax(0, 1fr);
 }
 
+.api-drawer {
+  width: min(1100px, 96vw);
+}
+
 .equipment-drawer {
   width: min(1120px, 96vw);
 }