Nesting the tag <button> inside the row's <a href="…"> made the browser treat any click on the button as a click on the anchor, sending the user to the document detail page even though the tag handler called goto() with the tag-filter URL. e.stopPropagation() doesn't cancel the anchor's default navigation. Refactor to the stretched-link pattern: the row-wide anchor sits as an overlay (`absolute inset-0 z-0`) and the content wrapper sits above it (`relative z-10` + `pointer-events-none`). Tag buttons re-enable pointer events with `pointer-events-auto`, so they're true siblings of the anchor and receive their own clicks. Empty content areas pass through to the anchor for whole-row navigation. The vitest-browser client project doesn't load Tailwind CSS, so the z-index has no effect there and Playwright's coordinate-based click hits the anchor instead of the button. Trigger the click directly on the button DOM element in the unit test (with a comment explaining the test-env constraint); the actual user-facing behavior is verified via playwright against the running dev server. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
sv
Everything you need to build a Svelte project, powered by sv.
Creating a project
If you're seeing this, you've probably already done this step. Congrats!
# create a new project in the current directory
npx sv create
# create a new project in my-app
npx sv create my-app
Developing
Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
Building
To create a production version of your app:
npm run build
You can preview the production build with npm run preview.
To deploy your app, you may need to install an adapter for your target environment.