Панель: шесть границ групп вместо двадцати двух

Каждая граница стоит 17 px — разделитель и поля по 8. Почти каждая кнопка была
своей группой: 289 px уходило на волосяные линии, и панель на реальной ширине
1080 не укладывалась в один ряд. Двадцать две линии к тому же не показывают
структуру, а превращаются в частокол.

Подпись группы теперь решает по ширине самой панели (@container), а не окна:
в админке панель 1080 при окне 1600, и правило по @media показало бы подпись
там, где она не влезает.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/components/ToolBar.js

@@ -36,29 +36,38 @@ const TABLE_GROUP = {
     ]
 }
 
+/**
+ * Урок: полный набор.
+ *
+ * ── Почему групп мало ────────────────────────────────────────────────────────
+ *
+ * Каждая граница групп стоит 17 px (разделитель 1 + поля по 8). Раньше почти
+ * каждая кнопка была своей группой — двадцать две границы, 289 px только
+ * на волосяные линии, и панель не укладывалась в один ряд. Заодно двадцать две
+ * линии не показывают структуру, а превращаются в частокол.
+ *
+ * Теперь границ шесть, по смыслу: правка · структура · оформление блока ·
+ * вставка · оживить урок · документы и ссылки.
+ */
 const LESSON = [
-    { type: 'g', items: ['undo', 'redo'] },
+    { type: 'g', items: ['undo', 'redo', 'clearMarks'] },
     { type: 'g', items: ['|'] },
 
     HEADINGS,
     { type: 'g', items: ['|'] },
 
-    { type: 's', toggle: false, items: ['bulletList', 'orderedList'] },
+    { type: 'g', items: ['bulletList', 'orderedList'] },
     { type: 's', toggle: true, items: ['alignLeft', 'alignCenter', 'alignRight'] },
+    { type: 's', toggle: false, items: ['blockquote', 'hr', 'codeBlock'] },
     TABLE_GROUP,
-
     { type: 'g', items: ['emoji'] },
-    { type: 'g', items: ['clearMarks'] },
-    { type: 's', toggle: false, items: ['blockquote', 'hr', 'codeBlock'] },
 
     { type: 'g', items: ['|'] },
 
     { type: 'g', items: ['activityRef'] },
-    { type: 's', toggle: false, items: ['image'] },
+    { type: 'g', items: ['image'] },
     { type: 's', toggle: false, items: ['video', 'iframe'] },
-    { type: 'g', items: ['voicemessage'] },
-    { type: 'g', items: ['webcamera'] },
-    { type: 'g', items: ['screencust'] },
+    { type: 'g', items: ['voicemessage', 'webcamera', 'screencust'] },
 
     { type: 'g', items: ['|'] },
 
@@ -68,23 +77,18 @@ const LESSON = [
     // кнопка-ссылка. На боевой базе клиента (601 урок) каждая использована
     // НОЛЬ раз, хотя все работают.
     //
-    // Иконку и подсказку они уже получили — не помогло бы: растворённые между
+    // Иконки и подсказки они уже получили — этого мало: растворённые между
     // «изображением» и «ссылкой», они не читаются как отдельная возможность.
-    // Поэтому у них своя группа с подписью. Мера бесплатная и делает
-    // необязательными дорогие: разовую подсветку новинки и карточки-примеры
-    // в пустом уроке.
-    //
-    // Подпись показывается только на широком экране — см. LABEL_MIN_WIDTH.
+    // Поэтому у них своя обведённая группа с подписью. Мера бесплатная
+    // и делает необязательными дорогие — разовую подсветку новинки
+    // и карточки-примеры в пустом уроке.
     { type: 'g', label: 'Оживить урок',
       items: ['audio', 'interactiveImage', 'insertToggleBlock', 'buttonLink'] },
 
     { type: 'g', items: ['|'] },
 
     { type: 's', toggle: false, items: ['iframe_pptx', 'iframe_pdf', 'pdf'] },
-    { type: 'g', items: ['link'] },
-    { type: 'g', items: ['file'] },
-    { type: 'g', items: ['iframe_custom'] },
-    { type: 'g', items: ['export_pdf'] },
+    { type: 'g', items: ['link', 'file', 'iframe_custom', 'export_pdf'] },
 ]
 
 const toolsInit = {

src/index.scss

@@ -274,6 +274,12 @@ body{
         z-index: var(--atma-toolbar-z-index, 10);
         gap: 2px;
 
+        // Подпись группы решает, показываться ли ей, по ширине САМОЙ ПАНЕЛИ,
+        // а не окна. В админке панель шириной 1080 при окне 1600: правило
+        // по @media показало бы подпись там, где она не влезает, и панель
+        // уехала бы во второй ряд.
+        container-type: inline-size;
+
         &-g{
             display: flex;
             flex-direction: row;
@@ -301,8 +307,10 @@ body{
                 padding: 0 8px 0 6px;
 
                 // Подпись занимает 96 px и появляется только там, где панель
-                // и без неё укладывается в один ряд.
-                @media (min-width: 1280px){
+                // и без неё укладывается в один ряд. Браузер без поддержки
+                // @container подпись просто не покажет — деградация мягкая,
+                // группу всё равно видно по рамке.
+                @container (min-width: 1200px){
                     display: inline;
                 }
             }