fix: training scroll fix

components/layout/app-sidebar.tsx

@@ -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 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">
+        <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-1 overflow-y-auto py-4">
-          <div className="flex items-center gap-3">
+          <div className="space-y-3">
-            {step.icon ? (
+            <div className="flex items-center gap-3">
-              <div className="rounded-full bg-primary/10 p-2 text-primary">
+              {step.icon ? (
-                <step.icon className="size-5" />
+                <div className="rounded-full bg-primary/10 p-2 text-primary">
-              </div>
+                  <step.icon className="size-5" />
-            ) : 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>
-                {section.points?.length ? (
+              ) : null}
-                  <ul className="mt-3 space-y-2 text-sm text-muted-foreground">
+              <h3 className="text-2xl font-semibold">{step.title}</h3>
-                    {section.points.map((point) => (
+            </div>
-                      <li
+            <p className="text-sm text-muted-foreground">{step.description}</p>
-                        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 ? (
+          {step.sections?.length ? (
-          <ul className="space-y-3 text-sm text-muted-foreground">
+            <div className="mt-6 space-y-4">
-            {step.points.map((point) => (
+              {step.sections.map((section) => (
-              <li
+                <div
-                key={point}
+                  key={section.title}
-                className="rounded-md border border-border/60 bg-muted/40 p-3"
+                  className="rounded-lg border border-border/70 bg-muted/20 p-4"
-              >
+                >
-                {point}
+                  <div className="flex items-start gap-3">
-              </li>
+                    {section.icon ? (
-            ))}
+                      <div className="rounded-md bg-primary/10 p-2 text-primary">
-          </ul>
+                        <section.icon className="size-4" />
-        ) : null}
+                      </div>
-        <div className="mt-auto flex gap-2 pt-2">
+                    ) : 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>