From 6fe6404e611795d3a37d84cb7b68baa425c02628 Mon Sep 17 00:00:00 2001
From: Leonid Pershin <lpershin@syntellect.ru>
Date: Mon, 27 Jul 2026 06:57:27 +0300
Subject: [PATCH] Refactor GridTab and SlotInspector components for improved UI
 and functionality

Updated the GridTab component to reorganize the layout, integrating the TemplateIssues component into a more user-friendly format. Enhanced the SlotInspector component by transitioning it from a panel to a dialog for better visibility and usability, especially for lengthy forms. Added new button functionality for creating slots and improved the handling of template issues with collapsible sections. These changes enhance the overall user experience in managing channels and slots.
---
 .../admin/channels/components/GridTab.tsx     |  26 +-
 .../channels/components/SlotInspector.tsx     | 628 +++++++++---------
 .../channels/components/TemplateIssues.tsx    |  52 +-
 3 files changed, 379 insertions(+), 327 deletions(-)

diff --git a/frontend/src/features/admin/channels/components/GridTab.tsx b/frontend/src/features/admin/channels/components/GridTab.tsx
index 78af3a7..a1ce7bb 100644
--- a/frontend/src/features/admin/channels/components/GridTab.tsx
+++ b/frontend/src/features/admin/channels/components/GridTab.tsx
@@ -281,17 +281,27 @@ export function GridTab({
             </div>
 
             <div className="flex flex-col gap-3">
-              <TemplateIssues
-                channelId={channelId}
-                slotsById={
-                  new Map(template.layers.flatMap((l) => l.slots).map((slot) => [slot.id, slot]))
-                }
-                onGoToSlot={openSlot}
-              />
               <TemplatePreview channelId={channelId} />
 
-              {/* Сетка на конкретную дату: видно, какие слои в этот день действительно действуют. */}
+              {/* Один ряд служебных элементов: проверки, дата просмотра и добавление слота. Всё,
+                  что не сама сетка, живёт в одной строке — вертикаль экрана нужна сетке. */}
               <div className="flex flex-wrap items-center gap-2 text-sm">
+                <TemplateIssues
+                  channelId={channelId}
+                  slotsById={
+                    new Map(template.layers.flatMap((l) => l.slots).map((slot) => [slot.id, slot]))
+                  }
+                  onGoToSlot={openSlot}
+                />
+                <Button
+                  size="sm"
+                  variant="outline"
+                  disabled={!layerForNewSlot}
+                  onClick={() => openNewSlot(1, 20 * 60)}
+                >
+                  <Plus className="h-4 w-4" />
+                  {t('admin.channels.newSlot')}
+                </Button>
                 <span className="text-muted-foreground">{t('admin.channels.showForDate')}</span>
                 <Input
                   type="date"
diff --git a/frontend/src/features/admin/channels/components/SlotInspector.tsx b/frontend/src/features/admin/channels/components/SlotInspector.tsx
index 00ab42e..28843ba 100644
--- a/frontend/src/features/admin/channels/components/SlotInspector.tsx
+++ b/frontend/src/features/admin/channels/components/SlotInspector.tsx
@@ -14,6 +14,7 @@ import type {
 import { qk } from '@/shared/api/query-keys'
 import { useApiError } from '@/shared/lib/use-api-error'
 import { Button } from '@/shared/ui/button'
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/shared/ui/dialog'
 import { Input } from '@/shared/ui/input'
 import { Label } from '@/shared/ui/label'
 import {
@@ -116,336 +117,353 @@ export function SlotInspector({
   const isContent = body.slotKind === 'Content'
 
   return (
-    <div className="crt-panel flex flex-col gap-3 rounded-md p-4 text-sm">
-      <div className="flex items-center justify-between gap-2">
-        <h3 className="text-sm font-semibold uppercase tracking-wide">
-          {draft.slot ? t('admin.channels.editSlot') : t('admin.channels.newSlot')}
-        </h3>
-        <Button size="sm" variant="ghost" onClick={onClose}>
-          ×
-        </Button>
-      </div>
+    // Отдельным окном, а не панелью под сеткой: форма длинная, и раньше она уезжала за нижний край,
+    // а сетка — то, с чем её сверяют, — уходила из виду.
+    <Dialog open onOpenChange={(next) => !next && onClose()}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>
+            {draft.slot ? t('admin.channels.editSlot') : t('admin.channels.newSlot')}
+          </DialogTitle>
+        </DialogHeader>
 
-      <div className="flex flex-col gap-1.5">
-        <Label>{t('admin.channels.slotTitle')}</Label>
-        <Input value={body.title} onChange={(e) => patch({ title: e.target.value })} />
-      </div>
-
-      <div className="grid grid-cols-2 gap-2">
-        <div className="flex flex-col gap-1.5">
-          <Label>{t('admin.channels.slotStart')}</Label>
-          <Input
-            type="time"
-            value={body.targetStart.slice(0, 5)}
-            onChange={(e) => patch({ targetStart: `${e.target.value}:00` })}
-          />
-        </div>
-        <div className="flex flex-col gap-1.5">
-          <Label>{t('admin.channels.slotDuration')}</Label>
-          <Input
-            type="number"
-            min={1}
-            value={body.targetDurationMinutes}
-            onChange={(e) => patch({ targetDurationMinutes: Number(e.target.value) })}
-          />
-        </div>
-      </div>
-
-      <div className="flex flex-col gap-1.5">
-        <Label>{t('admin.channels.weekday')}</Label>
-        <select
-          className="h-9 rounded-md border border-border bg-transparent px-2"
-          value={body.weekday ?? 'any'}
-          onChange={(e) =>
-            patch({ weekday: e.target.value === 'any' ? null : Number(e.target.value) })
-          }
-        >
-          <option value="any">{t('admin.channels.everyDay')}</option>
-          {[1, 2, 3, 4, 5, 6, 0].map((day) => (
-            <option key={day} value={day}>
-              {t(`admin.channels.weekdays.${day}`)}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      <div className="grid grid-cols-2 gap-2">
-        <div className="flex flex-col gap-1.5">
-          <Label>{t('admin.channels.daypart')}</Label>
-          <select
-            className="h-9 rounded-md border border-border bg-transparent px-2"
-            value={body.daypart}
-            onChange={(e) => patch({ daypart: e.target.value as Daypart })}
-          >
-            {DAYPARTS.map((value) => (
-              <option key={value} value={value}>
-                {t(`admin.channels.dayparts.${value}`)}
-              </option>
-            ))}
-          </select>
-        </div>
-        <div className="flex flex-col gap-1.5">
-          <Label>{t('admin.channels.slotKind')}</Label>
-          <select
-            className="h-9 rounded-md border border-border bg-transparent px-2"
-            value={body.slotKind}
-            onChange={(e) => {
-              const slotKind = e.target.value as SlotKind
-              patch({
-                slotKind,
-                // Повтору нужен источник, конец вещания не берёт контент вовсе.
-                repeatSource:
-                  slotKind === 'Repeat'
-                    ? (body.repeatSource ?? { daysAgo: 1, time: '20:00:00', durationMinutes: 90 })
-                    : null,
-              })
-            }}
-          >
-            {SLOT_KINDS.map((value) => (
-              <option key={value} value={value}>
-                {t(`admin.channels.slotKinds.${value}`)}
-              </option>
-            ))}
-          </select>
-        </div>
-      </div>
-
-      {isContent && (
-        <>
+        <div className="flex max-h-[65vh] flex-col gap-3 overflow-y-auto pr-1 text-sm">
           <div className="flex flex-col gap-1.5">
-            <Label>{t('admin.channels.group')}</Label>
-            <select
-              className="h-9 rounded-md border border-border bg-transparent px-2"
-              value={body.groupId ?? ''}
-              onChange={(e) => patch({ groupId: e.target.value || null })}
-            >
-              <option value="">{t('admin.channels.pickGroup')}</option>
-              {(groups ?? []).map((group) => (
-                <option key={group.id} value={group.id}>
-                  {group.name} · {group.itemCount}
-                </option>
-              ))}
-            </select>
+            <Label>{t('admin.channels.slotTitle')}</Label>
+            <Input value={body.title} onChange={(e) => patch({ title: e.target.value })} />
           </div>
 
-          <div className="flex flex-col gap-1.5">
-            <Label>{t('admin.channels.strategy')}</Label>
-            <select
-              className="h-9 rounded-md border border-border bg-transparent px-2"
-              value={body.strategy?.type ?? 'Sequential'}
-              onChange={(e) =>
-                patch({
-                  strategy: {
-                    ...(body.strategy ?? {
-                      restartOnEnd: true,
-                      cooldownDays: 0,
-                      fallback: 'OldestFirst',
-                      type: 'Sequential',
-                    }),
-                    type: e.target.value as SlotStrategyType,
-                  },
-                })
-              }
-            >
-              {STRATEGIES.map((value) => (
-                <option key={value} value={value}>
-                  {t(`admin.channels.strategies.${value}`)}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          {body.strategy?.type === 'RandomWithCooldown' && (
-            <div className="flex flex-col gap-1.5">
-              <Label>{t('admin.channels.cooldownDays')}</Label>
-              <Input
-                type="number"
-                min={0}
-                value={body.strategy.cooldownDays}
-                onChange={(e) =>
-                  patch({
-                    strategy: { ...body.strategy!, cooldownDays: Number(e.target.value) },
-                  })
-                }
-              />
-              <p className="text-xs text-muted-foreground">{t('admin.channels.cooldownHint')}</p>
-            </div>
-          )}
-
           <div className="grid grid-cols-2 gap-2">
             <div className="flex flex-col gap-1.5">
-              <Label>{t('admin.channels.blockMode')}</Label>
+              <Label>{t('admin.channels.slotStart')}</Label>
+              <Input
+                type="time"
+                value={body.targetStart.slice(0, 5)}
+                onChange={(e) => patch({ targetStart: `${e.target.value}:00` })}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label>{t('admin.channels.slotDuration')}</Label>
+              <Input
+                type="number"
+                min={1}
+                value={body.targetDurationMinutes}
+                onChange={(e) => patch({ targetDurationMinutes: Number(e.target.value) })}
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <Label>{t('admin.channels.weekday')}</Label>
+            <select
+              className="h-9 rounded-md border border-border bg-transparent px-2"
+              value={body.weekday ?? 'any'}
+              onChange={(e) =>
+                patch({ weekday: e.target.value === 'any' ? null : Number(e.target.value) })
+              }
+            >
+              <option value="any">{t('admin.channels.everyDay')}</option>
+              {[1, 2, 3, 4, 5, 6, 0].map((day) => (
+                <option key={day} value={day}>
+                  {t(`admin.channels.weekdays.${day}`)}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="grid grid-cols-2 gap-2">
+            <div className="flex flex-col gap-1.5">
+              <Label>{t('admin.channels.daypart')}</Label>
               <select
                 className="h-9 rounded-md border border-border bg-transparent px-2"
-                value={body.blockMode}
-                onChange={(e) => patch({ blockMode: e.target.value as SlotBlockMode })}
+                value={body.daypart}
+                onChange={(e) => patch({ daypart: e.target.value as Daypart })}
               >
-                {BLOCK_MODES.map((value) => (
+                {DAYPARTS.map((value) => (
                   <option key={value} value={value}>
-                    {t(`admin.channels.blockModes.${value}`)}
+                    {t(`admin.channels.dayparts.${value}`)}
                   </option>
                 ))}
               </select>
             </div>
-            {body.blockMode !== 'FillSlot' && (
+            <div className="flex flex-col gap-1.5">
+              <Label>{t('admin.channels.slotKind')}</Label>
+              <select
+                className="h-9 rounded-md border border-border bg-transparent px-2"
+                value={body.slotKind}
+                onChange={(e) => {
+                  const slotKind = e.target.value as SlotKind
+                  patch({
+                    slotKind,
+                    // Повтору нужен источник, конец вещания не берёт контент вовсе.
+                    repeatSource:
+                      slotKind === 'Repeat'
+                        ? (body.repeatSource ?? {
+                            daysAgo: 1,
+                            time: '20:00:00',
+                            durationMinutes: 90,
+                          })
+                        : null,
+                  })
+                }}
+              >
+                {SLOT_KINDS.map((value) => (
+                  <option key={value} value={value}>
+                    {t(`admin.channels.slotKinds.${value}`)}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {isContent && (
+            <>
               <div className="flex flex-col gap-1.5">
-                <Label>{t('admin.channels.blockValue')}</Label>
+                <Label>{t('admin.channels.group')}</Label>
+                <select
+                  className="h-9 rounded-md border border-border bg-transparent px-2"
+                  value={body.groupId ?? ''}
+                  onChange={(e) => patch({ groupId: e.target.value || null })}
+                >
+                  <option value="">{t('admin.channels.pickGroup')}</option>
+                  {(groups ?? []).map((group) => (
+                    <option key={group.id} value={group.id}>
+                      {group.name} · {group.itemCount}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div className="flex flex-col gap-1.5">
+                <Label>{t('admin.channels.strategy')}</Label>
+                <select
+                  className="h-9 rounded-md border border-border bg-transparent px-2"
+                  value={body.strategy?.type ?? 'Sequential'}
+                  onChange={(e) =>
+                    patch({
+                      strategy: {
+                        ...(body.strategy ?? {
+                          restartOnEnd: true,
+                          cooldownDays: 0,
+                          fallback: 'OldestFirst',
+                          type: 'Sequential',
+                        }),
+                        type: e.target.value as SlotStrategyType,
+                      },
+                    })
+                  }
+                >
+                  {STRATEGIES.map((value) => (
+                    <option key={value} value={value}>
+                      {t(`admin.channels.strategies.${value}`)}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {body.strategy?.type === 'RandomWithCooldown' && (
+                <div className="flex flex-col gap-1.5">
+                  <Label>{t('admin.channels.cooldownDays')}</Label>
+                  <Input
+                    type="number"
+                    min={0}
+                    value={body.strategy.cooldownDays}
+                    onChange={(e) =>
+                      patch({
+                        strategy: { ...body.strategy!, cooldownDays: Number(e.target.value) },
+                      })
+                    }
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    {t('admin.channels.cooldownHint')}
+                  </p>
+                </div>
+              )}
+
+              <div className="grid grid-cols-2 gap-2">
+                <div className="flex flex-col gap-1.5">
+                  <Label>{t('admin.channels.blockMode')}</Label>
+                  <select
+                    className="h-9 rounded-md border border-border bg-transparent px-2"
+                    value={body.blockMode}
+                    onChange={(e) => patch({ blockMode: e.target.value as SlotBlockMode })}
+                  >
+                    {BLOCK_MODES.map((value) => (
+                      <option key={value} value={value}>
+                        {t(`admin.channels.blockModes.${value}`)}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                {body.blockMode !== 'FillSlot' && (
+                  <div className="flex flex-col gap-1.5">
+                    <Label>{t('admin.channels.blockValue')}</Label>
+                    <Input
+                      type="number"
+                      min={1}
+                      value={body.blockValue}
+                      onChange={(e) => patch({ blockValue: Number(e.target.value) })}
+                    />
+                  </div>
+                )}
+              </div>
+
+              <div className="flex flex-col gap-1.5">
+                <Label>{t('admin.channels.overflow')}</Label>
+                <select
+                  className="h-9 rounded-md border border-border bg-transparent px-2"
+                  value={body.overflowPolicy}
+                  onChange={(e) => patch({ overflowPolicy: e.target.value as OverflowPolicy })}
+                >
+                  {OVERFLOW.map((value) => (
+                    <option key={value} value={value}>
+                      {t(`admin.channels.overflows.${value}`)}
+                    </option>
+                  ))}
+                </select>
+                <p className="text-xs text-muted-foreground">{t('admin.channels.overflowHint')}</p>
+              </div>
+            </>
+          )}
+
+          {body.slotKind === 'Repeat' && body.repeatSource && (
+            <div className="grid grid-cols-3 gap-2">
+              <div className="flex flex-col gap-1.5">
+                <Label>{t('admin.channels.repeatDaysAgo')}</Label>
                 <Input
                   type="number"
                   min={1}
-                  value={body.blockValue}
-                  onChange={(e) => patch({ blockValue: Number(e.target.value) })}
+                  value={body.repeatSource.daysAgo}
+                  onChange={(e) =>
+                    patch({
+                      repeatSource: { ...body.repeatSource!, daysAgo: Number(e.target.value) },
+                    })
+                  }
                 />
               </div>
-            )}
-          </div>
+              <div className="flex flex-col gap-1.5">
+                <Label>{t('admin.channels.repeatTime')}</Label>
+                <Input
+                  type="time"
+                  value={body.repeatSource.time.slice(0, 5)}
+                  onChange={(e) =>
+                    patch({ repeatSource: { ...body.repeatSource!, time: `${e.target.value}:00` } })
+                  }
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label>{t('admin.channels.repeatDuration')}</Label>
+                <Input
+                  type="number"
+                  min={1}
+                  value={body.repeatSource.durationMinutes}
+                  onChange={(e) =>
+                    patch({
+                      repeatSource: {
+                        ...body.repeatSource!,
+                        durationMinutes: Number(e.target.value),
+                      },
+                    })
+                  }
+                />
+              </div>
+            </div>
+          )}
 
-          <div className="flex flex-col gap-1.5">
-            <Label>{t('admin.channels.overflow')}</Label>
-            <select
-              className="h-9 rounded-md border border-border bg-transparent px-2"
-              value={body.overflowPolicy}
-              onChange={(e) => patch({ overflowPolicy: e.target.value as OverflowPolicy })}
-            >
-              {OVERFLOW.map((value) => (
-                <option key={value} value={value}>
-                  {t(`admin.channels.overflows.${value}`)}
-                </option>
-              ))}
-            </select>
-            <p className="text-xs text-muted-foreground">{t('admin.channels.overflowHint')}</p>
+          <div className="flex flex-wrap items-end gap-3">
+            <label className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                checked={body.isAnchor}
+                onChange={(e) => patch({ isAnchor: e.target.checked })}
+              />
+              {t('admin.channels.anchor')}
+            </label>
+            <div className="flex flex-col gap-1.5">
+              <Label>{t('admin.channels.maxDrift')}</Label>
+              <Input
+                type="number"
+                min={0}
+                className="w-24"
+                value={body.maxDriftMinutes}
+                onChange={(e) => patch({ maxDriftMinutes: Number(e.target.value) })}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label>{t('admin.channels.snap')}</Label>
+              <select
+                className="h-9 rounded-md border border-border bg-transparent px-2"
+                value={body.snapToMinutes ?? 0}
+                onChange={(e) =>
+                  patch({
+                    snapToMinutes: Number(e.target.value) === 0 ? null : Number(e.target.value),
+                  })
+                }
+              >
+                {SNAP_OPTIONS.map((value) => (
+                  <option key={value} value={value}>
+                    {value === 0 ? t('admin.channels.snapOff') : `${value}`}
+                  </option>
+                ))}
+              </select>
+            </div>
           </div>
-        </>
-      )}
+          <p className="text-xs text-muted-foreground">{t('admin.channels.anchorHint')}</p>
 
-      {body.slotKind === 'Repeat' && body.repeatSource && (
-        <div className="grid grid-cols-3 gap-2">
-          <div className="flex flex-col gap-1.5">
-            <Label>{t('admin.channels.repeatDaysAgo')}</Label>
-            <Input
-              type="number"
-              min={1}
-              value={body.repeatSource.daysAgo}
-              onChange={(e) =>
-                patch({
-                  repeatSource: { ...body.repeatSource!, daysAgo: Number(e.target.value) },
-                })
-              }
-            />
-          </div>
-          <div className="flex flex-col gap-1.5">
-            <Label>{t('admin.channels.repeatTime')}</Label>
-            <Input
-              type="time"
-              value={body.repeatSource.time.slice(0, 5)}
-              onChange={(e) =>
-                patch({ repeatSource: { ...body.repeatSource!, time: `${e.target.value}:00` } })
-              }
-            />
-          </div>
-          <div className="flex flex-col gap-1.5">
-            <Label>{t('admin.channels.repeatDuration')}</Label>
-            <Input
-              type="number"
-              min={1}
-              value={body.repeatSource.durationMinutes}
-              onChange={(e) =>
-                patch({
-                  repeatSource: {
-                    ...body.repeatSource!,
-                    durationMinutes: Number(e.target.value),
-                  },
-                })
-              }
-            />
+          {/* Стыки: внутри слота — между единицами, после слота — на переходе к следующему. */}
+          <div className="grid grid-cols-2 gap-2">
+            <div className="flex flex-col gap-1.5">
+              <Label>{t('admin.channels.junctionBetween')}</Label>
+              <select
+                className="h-9 rounded-md border border-border bg-transparent px-2"
+                value={body.junctionBetweenId ?? ''}
+                onChange={(e) => patch({ junctionBetweenId: e.target.value || null })}
+              >
+                <option value="">{t('admin.channels.junctionDefault')}</option>
+                {(junctions ?? []).map((junction) => (
+                  <option key={junction.id} value={junction.id}>
+                    {junction.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label>{t('admin.channels.junctionAfter')}</Label>
+              <select
+                className="h-9 rounded-md border border-border bg-transparent px-2"
+                value={body.junctionAfterId ?? ''}
+                onChange={(e) => patch({ junctionAfterId: e.target.value || null })}
+              >
+                <option value="">{t('admin.channels.junctionDefault')}</option>
+                {(junctions ?? []).map((junction) => (
+                  <option key={junction.id} value={junction.id}>
+                    {junction.name}
+                  </option>
+                ))}
+              </select>
+            </div>
           </div>
         </div>
-      )}
 
-      <div className="flex flex-wrap items-end gap-3">
-        <label className="flex items-center gap-2">
-          <input
-            type="checkbox"
-            checked={body.isAnchor}
-            onChange={(e) => patch({ isAnchor: e.target.checked })}
-          />
-          {t('admin.channels.anchor')}
-        </label>
-        <div className="flex flex-col gap-1.5">
-          <Label>{t('admin.channels.maxDrift')}</Label>
-          <Input
-            type="number"
-            min={0}
-            className="w-24"
-            value={body.maxDriftMinutes}
-            onChange={(e) => patch({ maxDriftMinutes: Number(e.target.value) })}
-          />
-        </div>
-        <div className="flex flex-col gap-1.5">
-          <Label>{t('admin.channels.snap')}</Label>
-          <select
-            className="h-9 rounded-md border border-border bg-transparent px-2"
-            value={body.snapToMinutes ?? 0}
-            onChange={(e) =>
-              patch({ snapToMinutes: Number(e.target.value) === 0 ? null : Number(e.target.value) })
-            }
-          >
-            {SNAP_OPTIONS.map((value) => (
-              <option key={value} value={value}>
-                {value === 0 ? t('admin.channels.snapOff') : `${value}`}
-              </option>
-            ))}
-          </select>
-        </div>
-      </div>
-      <p className="text-xs text-muted-foreground">{t('admin.channels.anchorHint')}</p>
-
-      {/* Стыки: внутри слота — между единицами, после слота — на переходе к следующему. */}
-      <div className="grid grid-cols-2 gap-2">
-        <div className="flex flex-col gap-1.5">
-          <Label>{t('admin.channels.junctionBetween')}</Label>
-          <select
-            className="h-9 rounded-md border border-border bg-transparent px-2"
-            value={body.junctionBetweenId ?? ''}
-            onChange={(e) => patch({ junctionBetweenId: e.target.value || null })}
-          >
-            <option value="">{t('admin.channels.junctionDefault')}</option>
-            {(junctions ?? []).map((junction) => (
-              <option key={junction.id} value={junction.id}>
-                {junction.name}
-              </option>
-            ))}
-          </select>
-        </div>
-        <div className="flex flex-col gap-1.5">
-          <Label>{t('admin.channels.junctionAfter')}</Label>
-          <select
-            className="h-9 rounded-md border border-border bg-transparent px-2"
-            value={body.junctionAfterId ?? ''}
-            onChange={(e) => patch({ junctionAfterId: e.target.value || null })}
-          >
-            <option value="">{t('admin.channels.junctionDefault')}</option>
-            {(junctions ?? []).map((junction) => (
-              <option key={junction.id} value={junction.id}>
-                {junction.name}
-              </option>
-            ))}
-          </select>
-        </div>
-      </div>
-
-      <div className="flex items-center justify-between gap-2">
-        {draft.slot ? (
-          <Button size="sm" variant="destructive" onClick={() => remove.mutate()}>
-            <Trash2 className="h-4 w-4" />
-          </Button>
-        ) : (
-          <span />
-        )}
-        <Button size="sm" disabled={save.isPending} onClick={() => save.mutate()}>
-          {t('common.save')}
-        </Button>
-      </div>
-    </div>
+        <DialogFooter className="items-center justify-between">
+          {draft.slot ? (
+            <Button size="sm" variant="destructive" onClick={() => remove.mutate()}>
+              <Trash2 className="h-4 w-4" />
+              {t('common.delete')}
+            </Button>
+          ) : (
+            <span />
+          )}
+          <div className="flex items-center gap-2">
+            <Button size="sm" variant="outline" onClick={onClose}>
+              {t('common.cancel')}
+            </Button>
+            <Button size="sm" disabled={save.isPending} onClick={() => save.mutate()}>
+              {t('common.save')}
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/frontend/src/features/admin/channels/components/TemplateIssues.tsx b/frontend/src/features/admin/channels/components/TemplateIssues.tsx
index 34eb50f..889bff8 100644
--- a/frontend/src/features/admin/channels/components/TemplateIssues.tsx
+++ b/frontend/src/features/admin/channels/components/TemplateIssues.tsx
@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
-import { AlertTriangle, CircleAlert } from 'lucide-react'
+import { AlertTriangle, ChevronDown, ChevronRight, CircleAlert } from 'lucide-react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { qk } from '@/shared/api/query-keys'
 import type { SlotDto, TemplateIssueDto } from '@/shared/api/types'
@@ -9,6 +10,10 @@ import { getTemplateIssues } from '../api'
 /**
  * Проверки по правилам (см. 5.1). Считаются на сервере по шаблону, без прогона генератора, поэтому
  * показываются прямо в редакторе и обновляются вместе с сеткой.
+ *
+ * По умолчанию свёрнуты в одну строку со счётчиками: семь дыр в сетке — обычное состояние
+ * недособранного канала, и занимать ими пол-экрана над самой сеткой значит прятать то, ради чего
+ * экран открывали. Разворачиваются по клику и скроллятся, не растягивая страницу.
  */
 export function TemplateIssues({
   channelId,
@@ -20,6 +25,7 @@ export function TemplateIssues({
   onGoToSlot: (slot: SlotDto) => void
 }>) {
   const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
   const { data: issues } = useQuery({
     queryKey: qk.channels.issues(channelId),
     queryFn: () => getTemplateIssues(channelId),
@@ -31,20 +37,38 @@ export function TemplateIssues({
   const warnings = issues.filter((i) => i.severity === 'Warning')
 
   return (
-    <div className="flex flex-col gap-1 rounded-md border border-border px-3 py-2 text-xs">
-      <span className="font-semibold uppercase tracking-wide text-muted-foreground">
+    <div className="flex min-w-0 flex-col gap-1 text-xs">
+      <button
+        type="button"
+        className={cn(
+          'flex items-center gap-1.5 self-start rounded-md border px-2 py-1 font-semibold uppercase tracking-wide',
+          errors.length > 0
+            ? 'border-red-700/50 text-red-500'
+            : 'border-amber-600/50 text-amber-500',
+        )}
+        onClick={() => setOpen((v) => !v)}
+      >
+        {open ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+        {errors.length > 0 ? (
+          <CircleAlert className="h-3 w-3" />
+        ) : (
+          <AlertTriangle className="h-3 w-3" />
+        )}
         {t('admin.channels.issues', { errors: errors.length, warnings: warnings.length })}
-      </span>
-      <ul className="flex flex-col gap-0.5">
-        {[...errors, ...warnings].map((issue, index) => (
-          <IssueRow
-            key={`${issue.kind}-${index}`}
-            issue={issue}
-            slot={issue.slotId ? slotsById.get(issue.slotId) : undefined}
-            onGoToSlot={onGoToSlot}
-          />
-        ))}
-      </ul>
+      </button>
+
+      {open && (
+        <ul className="crt-panel flex max-h-48 flex-col gap-0.5 overflow-y-auto rounded-md px-3 py-2">
+          {[...errors, ...warnings].map((issue, index) => (
+            <IssueRow
+              key={`${issue.kind}-${index}`}
+              issue={issue}
+              slot={issue.slotId ? slotsById.get(issue.slotId) : undefined}
+              onGoToSlot={onGoToSlot}
+            />
+          ))}
+        </ul>
+      )}
     </div>
   )
 }