[ppxb]

Description

Fixed an issue where the content search component could not be used when the header is in auto mode.

Close #7091

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update
• Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.

Checklist

ℹ️ Check all checkboxes - this will indicate that you have done everything in accordance with the rules in CONTRIBUTING.

• If you introduce new functionality, document it. You can run documentation with pnpm run docs:dev command.
• Run the tests with pnpm test.
• Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.
• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

Summary by CodeRabbit

• Bug Fixes
  • Improved header auto-hide behavior to be more intelligent, using a trigger zone that keeps the header visible when your mouse is near the top or within the header area.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 087476d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

📝 Walkthrough

Walkthrough

Fixed header auto-hide behavior in the layout component by introducing a zone-based trigger system that prevents unintended header visibility when the mouse is near the top of the page, resolving an issue where the header would shift form elements unexpectedly.

Changes

Cohort / File(s)	Summary
Header Auto-Hide Logic packages/@core/ui-kit/layout-ui/src/vben-layout.vue	Introduced HEADER_TRIGGER_DISTANCE constant and replaced unconditional header hiding with zone-based computation. Added isInTriggerZone and isInHeaderZone computed properties to determine header visibility based on mouse position relative to header boundaries, preventing premature header appearance during scroll interactions.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• fix: automatic hiding and displaying of headers can only be used on content #4145: Modifies header auto-hide behavior and mouse/zone detection logic in vben-layout.vue for controlling header visibility.
• fix: header left padding fixed #5007: Adjusts header visibility and headerIsHidden computed property logic in the same layout component.

Suggested labels

bug

Suggested reviewers

• anncwb
• vince292007
• mynetfan

Poem

🐰 A header that hides with finesse,
No more dance of shifting distress,
With zones so neat, positioned just right,
Forms stay still, interaction's delight,
Zone-aware hiding — truly blessed! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title is vague and generic, using non-descriptive terms like 'auto mode issue' that don't clearly convey the specific interaction problem being fixed.	Refine the title to be more specific about the issue, such as 'fix: prevent header auto-show from blocking search input' to better describe the actual problem.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description is mostly complete with all required sections filled out, including type of change selection, issue reference, and checklist items marked as completed.
Linked Issues check	✅ Passed	The code changes address the linked issue #7091 by implementing a zone-based header auto-hide logic that prevents the header from showing when the mouse is within the trigger zone or header area, allowing proper interaction with the search form.
Out of Scope Changes check	✅ Passed	All changes in the pull request are directly related to fixing the header auto-show issue described in issue #7091, with no extraneous modifications outside the stated objective.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/@core/ui-kit/layout-ui/src/vben-layout.vue (1)

405-428: Effective fix for the header auto-hide interaction issue.

The zone-based approach correctly addresses the reported problem:

1. The 12px trigger zone at the very top prevents accidental header shows when hovering near forms.
2. Once visible, isInHeaderZone allows interaction while the mouse stays within the header area.

A few minor observations:

• The self-referential watch (watching headerIsHidden.value while also setting it) is intentional and stable here since the state converges quickly, but a brief comment explaining this pattern would help future maintainers.
• Consider documenting why 12 was chosen for HEADER_TRIGGER_DISTANCE (e.g., balances discoverability vs. accidental triggers).

💡 Optional: Add a brief comment explaining the constant

 {
-  const HEADER_TRIGGER_DISTANCE = 12;
+  // Small trigger zone at the very top to prevent accidental header shows
+  // when interacting with content near the top edge (e.g., search forms)
+  const HEADER_TRIGGER_DISTANCE = 12;

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 19b2d7a and 087476d.

📒 Files selected for processing (1)

• packages/@core/ui-kit/layout-ui/src/vben-layout.vue

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

• GitHub Check: post-update (ubuntu-latest)
• GitHub Check: post-update (windows-latest)
• GitHub Check: Check (ubuntu-latest)
• GitHub Check: Test (windows-latest)
• GitHub Check: Check (windows-latest)
• GitHub Check: Lint (windows-latest)