Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(wizard): fix step 3 layout scrolling and add step 4 confirmation modal

Browse Source
This commit is contained in:
DanielS
2026-09-07 23:15:21 +02:00
parent 404e7cd314
commit 5f29bb68a4
3 changed files with 197 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
shop/components/order-wizard.tsx
View File

@@ -940,11 +940,11 @@ export function OrderWizard({
{/* Step 3 Categories inside left sidebar */}
{step === 3 && (
<div className="pt-4 border-t border-white/10 space-y-3">
<h3 className="text-xs font-bold uppercase tracking-wider text-slate-400">
<div className="pt-3 border-t border-white/10 flex flex-col min-h-0 max-h-[calc(100vh-22rem)] overflow-hidden">
<h3 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-2 shrink-0">
Kategorien
</h3>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-1.5 flex-1 min-h-0 overflow-y-auto pr-1 pb-2 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
{visibleCategories.map((cat) => {
const sel = selections[cat.id]
const hasSelection = (sel?.productIds && sel.productIds.length > 0) || !!sel?.productId
@@ -956,7 +956,7 @@ export function OrderWizard({
<button
key={cat.id}
onClick={() => setActiveCategoryId(cat.id)}
className={`flex items-center gap-2.5 p-2.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${
className={`flex items-center gap-2 p-2 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group shrink-0 ${
isMissingRequired
? 'bg-red-500/10 border-red-500/50 text-red-400 font-bold'
: isActive
@@ -968,7 +968,7 @@ export function OrderWizard({
<div className="absolute left-0 top-0 bottom-0 w-1 bg-primary" />
)}
<div className={`p-1.5 rounded-lg transition-colors ${
<div className={`p-1.5 rounded-lg transition-colors shrink-0 ${
isMissingRequired
? 'bg-red-500/20 text-red-400'
: isActive
@@ -995,7 +995,7 @@ export function OrderWizard({
✓
</span>
) : isRequired ? (
<span className="text-[9px] px-2 py-0.5 rounded-full font-extrabold shrink-0 border border-red-500 text-red-400 bg-red-500/20 animate-pulse tracking-wider">
<span className="text-[9px] px-1.5 py-0.2 rounded-full font-extrabold shrink-0 border border-red-500 text-red-400 bg-red-500/20 animate-pulse tracking-wider">
FEHLT!
</span>
) : null}