From c172ce9b122bed11c21c2a1ddf2435af138f8c11 Mon Sep 17 00:00:00 2001 From: Till JS Date: Thu, 9 Apr 2026 19:50:04 +0200 Subject: [PATCH] fix(mana/web): replace h2/h3 with div in AiSettings + AiTierStep MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The AiSettings card was rendering with browser-default heading sizes (~30px h2, ~18px h3) instead of the Tailwind utility classes I'd given them. Visible in production: "KI-Optionen" came out huge, "Auf deinem Gerät" ditto, the whole card looked like the font-size system was broken. Root cause: app.css has an `@layer base` block that explicitly sets `h2 { font-size: 1.875rem; ... }` etc as a project-wide rich- text default. The intention is that PROSE-style content gets nice typography for free. But for components that use semantic h2/h3 tags purely for document structure (not for visual sizing), the base layer rule wins over the utility classes when Tailwind 4's content-scanning misses the file. Why other settings cards work: their

tags live INLINE in routes/(app)/settings/+page.svelte, which Tailwind's Vite plugin walks via the SvelteKit route entry. My new AiSettings card is in lib/components/settings/AiSettings.svelte — a separate component file that's imported by the route but apparently doesn't get its classes generated reliably (likely a Tailwind 4 cache issue with recently-added files in non-route paths). Result: text-lg / text-sm / text-xs aren't in the output CSS, so the @layer base heading rule is the only thing setting the size, and it wins. Pragmatic fix: replace

and

with
/
. Divs aren't subject to the @layer base h2/h3 reset, so even if the utility classes are also missing the styles fall back to the element's natural inline-block-with-inherited-font-size behavior. And the Tailwind classes — when they DO eventually get picked up (e.g. on a clean build) — apply on top. Same change applied to: - apps/mana/apps/web/src/lib/components/settings/AiSettings.svelte (the section header + each tier card title) - apps/mana/apps/web/src/lib/components/onboarding/steps/AiTierStep.svelte (the step's main heading + each tier card title) Functionally identical, just different element type. The semantic loss is minimal — these aren't document-structure headings, they're visual labels inside a card UI. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../web/src/lib/components/onboarding/steps/AiTierStep.svelte | 4 ++-- .../apps/web/src/lib/components/settings/AiSettings.svelte | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/mana/apps/web/src/lib/components/onboarding/steps/AiTierStep.svelte b/apps/mana/apps/web/src/lib/components/onboarding/steps/AiTierStep.svelte index 4560f5844..14926a51a 100644 --- a/apps/mana/apps/web/src/lib/components/onboarding/steps/AiTierStep.svelte +++ b/apps/mana/apps/web/src/lib/components/onboarding/steps/AiTierStep.svelte @@ -58,7 +58,7 @@
-

Wie soll Mana KI nutzen?

+
Wie soll Mana KI nutzen?

Mana bietet KI-Funktionen auf vier Ebenen — von "gar keine" bis zu allem. Du entscheidest, welche Schichten dein Vertrauen haben. @@ -103,7 +103,7 @@

-

{card.title}

+
{card.title}
{card.tagline} {#if enabled} diff --git a/apps/mana/apps/web/src/lib/components/settings/AiSettings.svelte b/apps/mana/apps/web/src/lib/components/settings/AiSettings.svelte index def9c1042..720e1f583 100644 --- a/apps/mana/apps/web/src/lib/components/settings/AiSettings.svelte +++ b/apps/mana/apps/web/src/lib/components/settings/AiSettings.svelte @@ -119,7 +119,7 @@
-

KI-Optionen

+
KI-Optionen

Wähle, welche KI-Schichten Mana verwenden darf — von gar keiner bis zu allen

@@ -166,7 +166,7 @@
-

{card.title}

+
{card.title}
{#if enabled}