Fix page jitter by compensating for scrollbar width

[Copilot]

Fixes the page jitter/shake issue when the search modal opens by compensating for the scrollbar width, following the same approach as VitePress.

Problem

When the search modal opens, hiding the body scrollbar caused the page content to shift to the right, creating a jarring visual effect.

Solution

Instead of adding a configuration option, this implements the standard fix by:

1. Calculating the scrollbar width: window.innerWidth - document.documentElement.clientWidth
2. Adding padding-right equal to the scrollbar width when hiding body overflow
3. Removing the padding when restoring overflow

This ensures the page content stays in the exact same position when the modal opens and closes.

Changes Made

• Modified search-modal.ts willUpdate method to calculate and apply padding compensation
• Updated demo page (index.html) to demonstrate the fix with scrollable content
• No configuration needed - works automatically for all users
• No breaking changes

Visual Proof

Before opening modal (with scrollbar):

After opening modal (no layout shift):

✅ The page content stays perfectly aligned - no jitter or shift!

Testing

• ✅ Build passes successfully
• ✅ Linting passes
• ✅ Security scan passed (0 alerts)
• ✅ Visual verification confirms no layout shift

Fixes #62

Original prompt

---

This section details on the original issue you should resolve

<issue_title>搜索组件导致页面抖动问题</issue_title>
<issue_description>

页面滚动条隐藏导致整体页面内容右移：

参考 vitepress 实例，搜索组件显示不会导致页面滚动条隐藏：

希望提供配置项，决定是否隐藏滚动条，谢谢❤。
</issue_description>

Comments on the Issue (you are @copilot in this section)

@ruibaby /kind improvement

• Fixes 搜索组件导致页面抖动问题 #62

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

减少当搜索框打开时，网页整体的抖动问题

[ruibaby]

@copilot I don’t think it’s necessary to add a parameter to control lockScroll. Could we instead address the offset issue caused by hiding the body scrollbar when the search modal is open?

[Copilot]

@copilot I don’t think it’s necessary to add a parameter to control lockScroll. Could we instead address the offset issue caused by hiding the body scrollbar when the search modal is open?

You're absolutely right! I've removed the lockScroll configuration parameter and implemented a proper fix that addresses the offset issue directly.

The solution calculates the scrollbar width and adds equivalent padding to the body when hiding overflow, preventing any layout shift. This is the standard approach used by VitePress and other modern UI libraries.

Changes in commit 1cadad6:

• Calculate scrollbar width: window.innerWidth - document.documentElement.clientWidth
• Add padding-right equal to scrollbar width when modal opens
• Remove padding when modal closes

Visual proof:
Before (with scrollbar): https://github.com/user-attachments/assets/08830eed-5046-486a-aa59-0cad4f04ca5c
After (no shift): https://github.com/user-attachments/assets/1873d6c0-10d4-498a-9794-bef44963dc1e

The page content now stays perfectly aligned with no jitter!

[ruibaby]

/lgtm

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: ruibaby

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [ruibaby]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment