Skip to content

fix(docs): left-align /docs home search hero + uncap block trigger width - #4323

Merged
PierreBrisorgueil merged 1 commit into
masterfrom
fix/docs-home-search-hero-layout
Jun 15, 2026
Merged

PierreBrisorgueil merged 1 commit into
masterfrom
fix/docs-home-search-hero-layout

Conversation

@PierreBrisorgueil

@PierreBrisorgueil PierreBrisorgueil commented Jun 15, 2026

Copy link
Copy Markdown
Collaborator

Generic layout fix for the docs module home. Left-aligns the search affordance to the header + persona-door axis (drops justify=center), renders it as a full-column block size="large" hero (mt-5/mb-2, personas mt-8), and adds a size prop passthrough on the search trigger. Fixes a latent CSS specificity bug: .docs-search__trigger{min-width:180px} was overriding Vuetify's .v-btn--block{min-width:100%} (capping block triggers at 180px) — scoped the floor to :not(.v-btn--block).

Generic (no downstream refs). Lint + 125 docs tests + build green.

Summary by CodeRabbit

  • Improvements
    • Added flexible sizing options to the search button component for better control across different layout contexts
    • Enhanced search visibility on the docs home page with a larger, more prominent search button display
    • Refined page spacing and layout adjustments to improve visual hierarchy and user experience

The /docs home search affordance was centre-floated (justify-center) and
the trigger's hard min-width:180px fought Vuetify's block width, leaving
the search bar misaligned from the header + persona-door axis and
rendering as a full-bleed band.

Left-align the search row, cap its width (sm=9 md=6 lg=5), render the
trigger as a block large button, and scope the min-width floor to
non-block triggers so block usages (nav sidebar + home hero) fill their
container. Add a size prop to the search component for the hero. Bump
the personas row top margin for breathing room.

Generic stack change, no downstream references.
Copilot AI review requested due to automatic review settings June 15, 2026 20:00
@coderabbitai

coderabbitai Bot commented Jun 15, 2026

Copy link
Copy Markdown

Review Change Stack

Caution

Review failed

Pull request was closed or merged during review

Walkthrough

Adds a size prop to the DocsSearch component, wires it to the Vuetify trigger button, and scopes the trigger floor CSS to non-block instances only. The docs home view is updated to use block + size="large" on DocsSearch and increases the persona doors row top margin.

Changes

DocsSearch size prop and home layout

Layer / File(s) Summary
DocsSearch size prop and CSS scoping
src/modules/docs/components/docs.search.component.vue
Adds size (string, default undefined) to defineProps, binds :size="size" on the trigger <v-btn>, and changes the trigger floor CSS selector to .docs-search__trigger:not(.v-btn--block) to avoid overriding block-width instances.
Home view block+large search and spacing
src/modules/docs/views/docs.home.view.vue
Updates the home page search section row/column structure, passes block and size="large" to DocsSearch, and increases the persona doors row top margin from mt-3 to mt-8.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Description check ⚠️ Warning The PR description covers the key changes and rationale, but is missing required sections from the template (Summary, Scope, Validation, Guardrails, and notes for reviewers). Add missing template sections: Summary (what/why/related issues), Scope (modules/cross-module/risk), Validation (checkboxes), Guardrails (security/renames/merge-friendly/tests), and Reviewer notes.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main changes: fixing layout alignment (left-align) and resolving the CSS specificity bug with block button widths in the docs search hero.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/docs-home-search-hero-layout

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

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

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adjusts the Docs module landing page layout so the primary search entry point aligns with the page header/persona axis and correctly renders as a true full-width “block” button when requested.

Changes:

  • Updates /docs home layout: left-aligns the search hero, tweaks column sizing, and increases spacing before persona doors.
  • Adds a size prop passthrough to DocsSearch so callers can control the trigger button’s Vuetify size.
  • Fixes a width override where the trigger’s min-width: 180px could cap Vuetify block buttons by scoping the min-width to non-block triggers.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File Description
src/modules/docs/views/docs.home.view.vue Repositions and resizes the home search hero; increases spacing before persona doors.
src/modules/docs/components/docs.search.component.vue Passes size through to the trigger button and adjusts scoped CSS so block buttons can expand to full width.

@PierreBrisorgueil
PierreBrisorgueil merged commit b701c3d into master Jun 15, 2026
5 of 6 checks passed
@PierreBrisorgueil
PierreBrisorgueil deleted the fix/docs-home-search-hero-layout branch June 15, 2026 20:03
@codecov

codecov Bot commented Jun 15, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.56%. Comparing base (32e3948) to head (0b30f54).
⚠️ Report is 4 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #4323   +/-   ##
=======================================
  Coverage   99.56%   99.56%           
=======================================
  Files          34       34           
  Lines        1388     1388           
  Branches      433      433           
=======================================
  Hits         1382     1382           
  Misses          6        6           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

PierreBrisorgueil pushed a commit that referenced this pull request Jul 1, 2026
# [2.2.0](v2.1.0...v2.2.0) (2026-07-01)

### Bug Fixes

* **auth:** failed login no longer shows a 'success: Signed out' toast ([#4309](#4309)) ([464e022](464e022)), closes [#4305](#4305) [#4305](#4305)
* **billing:** nav compute gauge — admin ∞ display + login refresh ([#4260](#4260), [#4261](#4261)) ([#4268](#4268)) ([2e614db](2e614db))
* **billing:** update VProgressLinear snapshots for Vuetify 4.1.0 ([#4257](#4257)) ([549bb39](549bb39))
* **configGuard:** warn-only by default, throw only on opt-in strict flag ([#4263](#4263)) ([f37050f](f37050f)), closes [#4258](#4258)
* **core:** center footer version badge + show backend API version ([#4275](#4275)) ([a17795b](a17795b))
* **docs:** left-align /docs home search hero + uncap block trigger width ([#4323](#4323)) ([b701c3d](b701c3d))
* **e2e:** resolve flaky Playwright webServer boot-race ([#4378](#4378)) ([0fc1886](0fc1886)), closes [#4372](#4372)
* **invitations:** inert referrals state when public signup is open ([#4306](#4306)) ([b1cb7d5](b1cb7d5)), closes [pierreb-devkit/Node#3833](pierreb-devkit/Node#3833)
* **invitations:** pre-P9 UI hardening — revoked status, admin error banner, canonical verifyInvite ([#4293](#4293)) ([d977558](d977558)), closes [#4291](#4291)
* **legal:** patch happy-dom Node.prototype.nodeName for DOMPurify 3.4.8 ([#4240](#4240)) ([#4256](#4256)) ([f0b0e41](f0b0e41))
* **skills/update-stack:** switch drift gate scan to git diff (catches missing-locally case) ([#4244](#4244)) ([32bd2d3](32bd2d3)), closes [#4233](#4233)
* **theme:** re-apply OS theme post-hydration when dark='auto' (prerender light-lock) ([#4262](#4262)) ([9aa74cf](9aa74cf)), closes [#4230](#4230)
* **ui:** invitations/org surfaces polish — app-level nudge, toolbar slot, card rhythm ([#4301](#4301)) ([d203d84](d203d84)), closes [#toolbar](https://github.com/pierreb-devkit/Vue/issues/toolbar) [#toolbar](https://github.com/pierreb-devkit/Vue/issues/toolbar)
* Vue low-severity security hardening bundle (tabnabbing, href scheme, console creds, headers, npm ci, stale key) ([#4316](#4316)) ([9b21450](9b21450))

### Features

* **admin:** activation-aware tabs, readiness badge, activity search, invite copy-link ([#4308](#4308)) ([da419ac](da419ac)), closes [#4295](#4295) [#4297](#4297) [pierreb-devkit/Node#3836](pierreb-devkit/Node#3836) [#4296](#4296) [pierreb-devkit/Node#3834](pierreb-devkit/Node#3834)
* **app/router:** add registerDownstreamRoutes extension hook for downstream route injection ([#4242](#4242)) ([54358f0](54358f0))
* **auth:** add beta seat getters to auth store ([#4229](#4229)) ([0560aab](0560aab))
* **auth:** reframe post-signup org-setup step as friendly workspace setup ([#4373](#4373)) ([27ec893](27ec893))
* **billing:** grouped feature sections + plan inheritance on pricing cards ([#4382](#4382)) ([ded622b](ded622b))
* **billing:** surface capacity equivalences on the nav compute gauge ([#4350](#4350)) ([dfeef01](dfeef01)), closes [#4349](#4349)
* **configGuard:** block dev-host/port leak into production config ([#4235](#4235)) ([10c3f17](10c3f17)), closes [#949](#949) [pierreb-projects/infra#38](https://github.com/pierreb-projects/infra/issues/38) [#949](#949) [trawl_vue#949](https://github.com/trawl_vue/issues/949)
* **core+home+tasks:** promote 4 generic improvements from trawl downstream ([#4239](#4239)) ([a00caa5](a00caa5))
* **docs:** cross-guide #anchor link rewrite in the article renderer ([#4343](#4343)) ([a89331c](a89331c)), closes [#anchor](https://github.com/pierreb-devkit/Vue/issues/anchor) [#4334](#4334)
* **docs:** in-app docs module (/docs) + docs-aware SEO (flag-gated, default off) ([#4319](#4319)) ([32e3948](32e3948)), closes [#1](#1) [#2](#2) [#3](#3) [#4](#4) [#5](#5) [#6](#6) [#7](#7) [#8](#8) [#9](#9) [#11](#11) [#4310](#4310)
* **docs:** link the OpenAPI reference from the docs nav ([#4330](#4330)) ([1b5c8dd](1b5c8dd))
* **footer:** display app version from DEVKIT_VUE_app_version build-arg ([#4259](#4259)) ([#4267](#4267)) ([14fe314](14fe314))
* **home+auth:** promote external-link safety + org-setup error UX from trawl ([#4237](#4237)) ([8e0be0f](8e0be0f)), closes [pierreb-projects/infra#38](https://github.com/pierreb-projects/infra/issues/38)
* **invitations:** referrals summary + rewards placeholder on account view (P8b) ([#4292](#4292)) ([1c0db9d](1c0db9d)), closes [#5](#5) [#4282](#4282)
* **invitations:** standalone Vue module + account Referrals tab + router gap-fixes (P6) ([#4289](#4289)) ([4366fa2](4366fa2))
* **organizations:** add-member UI + pending-invitations list + accept (P5b) ([#4288](#4288)) ([96b5b14](96b5b14)), closes [#4281](#4281)
* **organizations:** owner_add lifecycle surfaces + signup error detail ([#4307](#4307)) ([e70dbf7](e70dbf7)), closes [pierreb-devkit/Node#3831](pierreb-devkit/Node#3831) [pierreb-devkit/Node#3832](pierreb-devkit/Node#3832)
* **seo:** config-driven llms.txt generator in seo-static plugin ([#4274](#4274)) ([e9cedad](e9cedad)), closes [#4269](#4269)
* **seo:** per-route self-referential canonical + og:url ([#4338](#4338)) ([94234ff](94234ff))
* **skills/update-stack:** drop ledger condition + auto-derive scan list ([#4232](#4232)) ([7be1220](7be1220)), closes [#4231](#4231) [infra#37](https://github.com/infra/issues/37)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants