fix: training scroll fix

This commit is contained in:
ivannoskov
2026-01-21 10:42:47 +03:00
parent 0af5cd7458
commit 8958d89d12

View File

@@ -891,8 +891,8 @@ function TrainingGuidePanel({
aria-modal="true"
aria-label="Обучение платформе"
>
<div className="flex h-full w-full max-w-md flex-col gap-6 border-l bg-background/95 p-6 shadow-2xl backdrop-blur">
<div className="flex items-start justify-between gap-4">
<div className="flex h-full w-full max-w-md flex-col border-l bg-background/95 p-6 shadow-2xl backdrop-blur">
<div className="flex items-start justify-between gap-4 shrink-0">
<div>
<div className="flex items-center gap-2 text-xs font-semibold uppercase text-muted-foreground">
<PlayCircle className="size-4 text-primary" />
@@ -911,66 +911,68 @@ function TrainingGuidePanel({
<X className="size-4" />
</Button>
</div>
<div className="space-y-3">
<div className="flex items-center gap-3">
{step.icon ? (
<div className="rounded-full bg-primary/10 p-2 text-primary">
<step.icon className="size-5" />
</div>
) : null}
<h3 className="text-2xl font-semibold">{step.title}</h3>
</div>
<p className="text-sm text-muted-foreground">{step.description}</p>
</div>
{step.sections?.length ? (
<div className="space-y-4">
{step.sections.map((section) => (
<div
key={section.title}
className="rounded-lg border border-border/70 bg-muted/20 p-4"
>
<div className="flex items-start gap-3">
{section.icon ? (
<div className="rounded-md bg-primary/10 p-2 text-primary">
<section.icon className="size-4" />
</div>
) : null}
<div>
<p className="text-sm font-semibold">{section.title}</p>
<p className="text-xs text-muted-foreground">
{section.description}
</p>
</div>
<div className="flex-1 overflow-y-auto py-4">
<div className="space-y-3">
<div className="flex items-center gap-3">
{step.icon ? (
<div className="rounded-full bg-primary/10 p-2 text-primary">
<step.icon className="size-5" />
</div>
{section.points?.length ? (
<ul className="mt-3 space-y-2 text-sm text-muted-foreground">
{section.points.map((point) => (
<li
key={point}
className="flex items-start gap-2 rounded-md bg-background/80 p-2"
>
<span className="mt-1 h-1.5 w-1.5 rounded-full bg-primary" />
<span>{point}</span>
</li>
))}
</ul>
) : null}
</div>
))}
) : null}
<h3 className="text-2xl font-semibold">{step.title}</h3>
</div>
<p className="text-sm text-muted-foreground">{step.description}</p>
</div>
) : step.points?.length ? (
<ul className="space-y-3 text-sm text-muted-foreground">
{step.points.map((point) => (
<li
key={point}
className="rounded-md border border-border/60 bg-muted/40 p-3"
>
{point}
</li>
))}
</ul>
) : null}
<div className="mt-auto flex gap-2 pt-2">
{step.sections?.length ? (
<div className="mt-6 space-y-4">
{step.sections.map((section) => (
<div
key={section.title}
className="rounded-lg border border-border/70 bg-muted/20 p-4"
>
<div className="flex items-start gap-3">
{section.icon ? (
<div className="rounded-md bg-primary/10 p-2 text-primary">
<section.icon className="size-4" />
</div>
) : null}
<div>
<p className="text-sm font-semibold">{section.title}</p>
<p className="text-xs text-muted-foreground">
{section.description}
</p>
</div>
</div>
{section.points?.length ? (
<ul className="mt-3 space-y-2 text-sm text-muted-foreground">
{section.points.map((point) => (
<li
key={point}
className="flex items-start gap-2 rounded-md bg-background/80 p-2"
>
<span className="mt-1 h-1.5 w-1.5 rounded-full bg-primary" />
<span>{point}</span>
</li>
))}
</ul>
) : null}
</div>
))}
</div>
) : step.points?.length ? (
<ul className="mt-6 space-y-3 text-sm text-muted-foreground">
{step.points.map((point) => (
<li
key={point}
className="rounded-md border border-border/60 bg-muted/40 p-3"
>
{point}
</li>
))}
</ul>
) : null}
</div>
<div className="flex gap-2 pt-4 shrink-0">
<Button variant="outline" onClick={onPrev} disabled={stepIndex === 0}>
Назад
</Button>