Fix Stitch redesign: border defaults, tab underline, 3-col carrier grid

Three small but visible regressions in the previous step:

1. Tailwind's "border" utility only sets the width; with preflight
   disabled the style fell back to the browser default (none), so the
   carrier cards in step 1 rendered without any visible outline. Add a
   minimal *,::before,::after rule that restores border-style: solid
   and a sensible default border-color, mirroring the relevant slice
   of preflight without breaking legacy screens.

2. The active tab underline was a mix of Tailwind border-b-2 utility
   classes on the button and a CSS border-bottom override. Because the
   button used flex items-center inside an li, the underline floated
   somewhere in the middle of the header instead of hugging the bottom.
   Drop the Tailwind border-* classes and switch to a single inset
   box-shadow at the bottom of the button, which always anchors to the
   header's lower edge regardless of padding.

3. The carrier grid was 4 columns on lg, which made 6 providers wrap
   awkwardly. Match the Stitch mockup: 2 cols on small screens, 3 on
   lg. Card corner radius shrunk from rounded-lg back to rounded (4px)
   to match the Stitch tool-style aesthetic.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
kerimatilganandClaude Opus 4.7 committed 2026-05-15 17:48:04 +02:00
1 parent a535dcee38
commit e464a4160d
2 files changed
+30 -27

No files matched your search

+1 -1
View File
@@ -65,7 +65,7 @@ async function renderWizardAnbieterButtons() {
anbieter.forEach(a => {
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'group flex flex-col items-center justify-center p-lg border border-outline-variant rounded-lg bg-surface-container-lowest hover:-translate-y-1 hover:shadow-sm hover:border-primary transition-all duration-200 h-32';
btn.className = 'group flex flex-col items-center justify-center p-lg border border-outline-variant rounded bg-surface-container-lowest hover:-translate-y-1 hover:shadow-sm hover:border-primary transition-all duration-200 h-32';
btn.innerHTML = `
<span class="material-symbols-outlined text-4xl text-on-surface-variant group-hover:text-primary mb-sm" style="font-variation-settings: 'FILL' 1;">cell_tower</span>
<span class="text-title-sm text-on-surface"></span>