[ADV-183] Fix DocSearch layout shift by unsetting container min-width

[nortonandreev]

User description

Problem

DocSearch applies a min-width to #docsearch-container when focused/open, causing a persistent layout shift in the header.

Fix

Override the default style to keep the search bar width stable.

---

PR Type

Bug fix

---

Description

• Fixes DocSearch layout shift by unsetting container min-width

• Prevents persistent header width changes when search is focused

---

Diagram Walkthrough

flowchart LR
  A["DocSearch container<br/>with min-width"] -- "override with<br/>unset !important" --> B["Stable search bar<br/>width"]

Loading

File Walkthrough

	Relevant files
Bug fix	index.scss Override DocSearch container min-width style                          docs/.vuepress/styles/index.scss Added CSS rule to unset min-width on #docsearch-container element Uses !important flag to override DocSearch default styles Prevents layout shift when search bar is focused or opened +4/-0

---

[linear]

ADV-183 DocSearch search bar applies min-width on focus causing persistent layout shift

[github-actions]

Docs Preview

• Status: ⏳ Creating preview…

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Passed Learn more about managing compliance generic rules or creating your own custom rules

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Organization best practice	Remove !important CSS override Remove !important by scoping the rule under an existing parent container (e.g., the navbar/header) to increase specificity and limit the override to the intended area. docs/.vuepress/styles/index.scss [87-89] -#docsearch-container { - min-width: unset !important; +.navbar #docsearch-container { + min-width: unset; } Apply / Chat Suggestion importance[1-10]: 6 __ Why: Relevant best practice - Avoid !important overrides; prefer increasing selector specificity (or scoping under an existing layout container) to keep styles maintainable and reduce unintended side effects.	Low
General	Use explicit zero minimum width In the #docsearch-container rule, change min-width: unset to min-width: 0 for better clarity. docs/.vuepress/styles/index.scss [87-89] #docsearch-container { - min-width: unset !important; + min-width: 0 !important; } Apply / Chat Suggestion importance[1-10]: 4 __ Why: The suggestion correctly proposes replacing unset with 0 for the min-width property, which makes the developer's intent clearer and is a minor improvement to code readability.	Low
More

[cloudflare-workers-and-pages]

Deploying documentation with    Cloudflare Pages

Latest commit:	5860359
Status:	✅  Deploy successful!
Preview URL:	https://b6363053.documentation-21k.pages.dev
Branch Preview URL:	https://fix-adv-183-docsearch-layout.documentation-21k.pages.dev

View logs

[github-actions]

Docs build

• Status: ✅ Build succeeded
• Preview: https://fix-ADV-183-docsearch-layout-shift.documentation-21k.pages.dev
  Changed pages: