fix(docs): left-align /docs home search hero + uncap block trigger width - #4323
Conversation
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.
|
Caution Review failedPull request was closed or merged during review WalkthroughAdds a ChangesDocsSearch size prop and home layout
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
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
/docshome layout: left-aligns the search hero, tweaks column sizing, and increases spacing before persona doors. - Adds a
sizeprop passthrough toDocsSearchso callers can control the trigger button’s Vuetify size. - Fixes a width override where the trigger’s
min-width: 180pxcould 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. |
Codecov Report✅ All modified and coverable lines are covered by tests. 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. 🚀 New features to boost your workflow:
|
# [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)
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-columnblock size="large"hero (mt-5/mb-2, personas mt-8), and adds asizeprop 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