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

style: limit step 3 sidebar scroll to basket items
All checks were successful
Staging Build / build (push) Successful in 2m59s
Details

Browse Source
This commit is contained in:
DanielS
2026-08-11 00:28:13 +02:00
parent 3ba7c91e1f
commit 73e046e959
2 changed files with 133 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1064,7 +1064,7 @@ export function OrderWizard({
<ProgressStepper step={step} basketItemsCount={basketItems.length} />
</div>
<div className="flex-1 overflow-y-auto pr-1">
<div className="flex-1 overflow-hidden">
<SummarySidebar
visibleCategories={visibleCategories}
selections={selections}

18
shop/components/wizard/summary-sidebar.tsx
View File

@@ -73,12 +73,15 @@ export function SummarySidebar({
prevStep,
}: SummarySidebarProps) {
return (
<div className="sticky top-6">
<Card className="bg-[oklch(0.145_0.01_148)]/90 backdrop-blur-md border border-slate-800 shadow-[0_0_30px_rgba(0,0,0,0.5)] rounded-2xl overflow-hidden flex flex-col max-h-[80vh]">
<div className="h-full flex flex-col">
<Card className="bg-[oklch(0.145_0.01_148)]/90 backdrop-blur-md border border-slate-800 shadow-[0_0_30px_rgba(0,0,0,0.5)] rounded-2xl overflow-hidden flex flex-col h-full">
<CardHeader className="shrink-0">
<CardTitle className="text-white">Zusammenfassung</CardTitle>
</CardHeader>
<CardContent className="space-y-4 flex-1 overflow-y-auto subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
<CardContent className="p-5 flex-1 flex flex-col overflow-hidden space-y-4">
{/* Active Selections & Price Calculation (Fixed) */}
<div className="space-y-4 shrink-0 overflow-y-auto max-h-[40%] pr-1 scrollbar-thin">
{visibleCategories.map(cat => {
const sel = selections[cat.id]
const selectedProds: Product[] = []
@@ -227,10 +230,13 @@ export function SummarySidebar({
{err}
</p>
))}
</div>
{/* Warenkorb List (Scrollable) */}
{basketItems.length > 0 && (
<div className="pt-4 border-t border-white/10 space-y-2">
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Warenkorb ({basketItems.length}):</p>
<div className="space-y-1.5">
<div className="flex-1 flex flex-col min-h-0 pt-3 border-t border-white/10 space-y-2 overflow-hidden">
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wider shrink-0">Warenkorb ({basketItems.length}):</p>
<div className="flex-1 overflow-y-auto pr-1 space-y-1.5 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
{basketItems.map((item, idx) => (
<div key={idx} className={`flex justify-between items-center text-xs bg-white/5 p-2 rounded border transition-all duration-300 ${idx === editingIdx ? 'border-blue-500/50 shadow-[0_0_10px_rgba(59,130,246,0.3)]' : 'border-white/10'}`}>
<div className="flex flex-col">