[helldweller]

Problem

Since the Vuetify 3 → 4 bump (Jamyn/dispatch#326) every page renders under the app bar and the navigation drawer, and cards lose their internal padding. Dashboards show it most, but .v-main is wrong on every layout.

Cause

Vuetify 4 puts all of its styles in cascade layers, and the browser ranks layers by first appearance. The built index.html links Vite's split CSS chunks (VApp-*.css, VContainer-*.css, router-*.css, …) before index-*.css, and those chunks open @layer vuetify-components first, so vuetify-core ends up above it. The * { padding: 0; margin: 0 } reset that vuetify-md2-compat.css restores into vuetify-core.reset then outranks every component rule. On .v-main exactly two rules set padding, .v-main { padding: var(--v-layout-*) } and that * reset, and the reset wins.

Fix

Declare the layer order Vuetify documents in an inline <style> at the top of <head>, before any stylesheet, so the ranking no longer depends on how Vite orders the chunks. This is the pattern the Vuetify upgrade guide describes (vuetifyjs/vuetify#22848).

Verification

Measured on the production image (docker/Dockerfile, sample data loaded) with headless Chrome and the CDP matched-styles API:

	before	after
.v-main padding-top / padding-left	0 / 0	64px / 440px
.v-card-title padding	0	8px 16px
content container x	0	440

🤖 Generated with Claude Code

[Copilot]

🟡 Changes recommended

The fix is correct and verified, but the inline block is placed ahead of <meta charset>, an avoidable best-practice/robustness deviation that should be addressed before approval.

1 open issue

• Charset meta no longer appears first in the head · New

What changed in this PR

This PR fixes a layout regression introduced by the Vuetify 3 → 4 upgrade. In Vuetify 4 all styles live in CSS cascade layers, and the browser ranks layers by the order their names first appear. Because Vite's split CSS chunks (VApp-*.css, VContainer-*.css, …) open @layer vuetify-components before index-*.css names vuetify-core, vuetify-core wrongly outranked vuetify-components. That let the * { padding: 0; margin: 0 } reset (restored into vuetify-core.reset by vuetify-md2-compat.css) beat component rules, stripping .v-main of its app-bar/drawer offsets and cards of their padding. The fix pins the layer order up-front via an inline <style> at the top of <head>.

Changes:

• Add an inline <style> block declaring @layer vuetify-core, vuetify-components, vuetify-overrides, vuetify-utilities, vuetify-final; before any stylesheet, matching Vuetify's documented order.
• Add an explanatory comment documenting the root cause and rationale.

File	Description
src/​dispatch/​static/​dispatch/​index.html	Declares the Vuetify cascade-layer order inline at the top of <head> so layer priority is deterministic regardless of Vite's chunk ordering; adds a comment explaining the fix.

_{Review effort: Balanced}