fix(ai-assistant-figma): реальный размер картинок (case-media--real вместо wide)

public/cases/ai-assistant-figma/index.html

@@ -241,6 +241,21 @@
       .case-article a:not(.btn) {
         color: var(--accent);
       }
+      /* Реальный размер картинки: натуральная ширина в пикселях, ограниченная колонкой */
+      .case-media--real {
+        width: auto;
+        margin-inline: auto;
+        margin-left: auto;
+        transform: none;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .case-media--real img {
+        width: auto;
+        max-width: 100%;
+        margin-inline: auto;
+      }
     </style>
     <script>
       (function () {
@@ -422,7 +437,7 @@
           Плагин добавляет в Figma панель AI-ассистента: от списка готовых сценариев до
           редактора скриптов с логом выполнения. Ниже — ключевые экраны работы.
         </p>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Список скриптов AI-ассистента"
@@ -433,7 +448,7 @@
           />
           <figcaption>Список доступных скриптов ассистента.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Редактор скриптов AI-ассистента"
@@ -444,7 +459,7 @@
           />
           <figcaption>Редактор скрипта с подсветкой и AI-подсказками.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Лог выполнения скрипта AI-ассистента"
@@ -455,7 +470,7 @@
           />
           <figcaption>Представление лога выполнения скрипта.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Индикатор работы скрипта AI-ассистента"
@@ -466,7 +481,7 @@
           />
           <figcaption>Индикатор активного выполнения скрипта.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Live Mode AI-ассистента"
@@ -477,7 +492,7 @@
           />
           <figcaption>Live Mode — интерактивный режим ассистента.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Меню More AI-ассистента"

public/en/cases/ai-assistant-figma/index.html

@@ -241,6 +241,21 @@
       .case-article a:not(.btn) {
         color: var(--accent);
       }
+      /* Реальный размер картинки: натуральная ширина в пикселях, ограниченная колонкой */
+      .case-media--real {
+        width: auto;
+        margin-inline: auto;
+        margin-left: auto;
+        transform: none;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .case-media--real img {
+        width: auto;
+        max-width: 100%;
+        margin-inline: auto;
+      }
     </style>
     <script>
       (function () {
@@ -422,7 +437,7 @@
           The plugin adds an AI assistant panel to Figma — from a list of ready-made
           scenarios to a script editor with an execution log. Key screens below.
         </p>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant script list"
@@ -433,7 +448,7 @@
           />
           <figcaption>List of available assistant scripts.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant script editor"
@@ -444,7 +459,7 @@
           />
           <figcaption>Script editor with highlighting and AI hints.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant script execution log"
@@ -455,7 +470,7 @@
           />
           <figcaption>Script execution log view.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant running indicator"
@@ -466,7 +481,7 @@
           />
           <figcaption>Active script execution indicator.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant Live Mode"
@@ -477,7 +492,7 @@
           />
           <figcaption>Live Mode — interactive assistant mode.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant More menu"

src/pages/cases/ai-assistant-figma.en.html

@@ -33,6 +33,21 @@
       .case-article a:not(.btn) {
         color: var(--accent);
       }
+      /* Реальный размер картинки: натуральная ширина в пикселях, ограниченная колонкой */
+      .case-media--real {
+        width: auto;
+        margin-inline: auto;
+        margin-left: auto;
+        transform: none;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .case-media--real img {
+        width: auto;
+        max-width: 100%;
+        margin-inline: auto;
+      }
     </style>
     <script>
       (function () {
@@ -109,7 +124,7 @@
           The plugin adds an AI assistant panel to Figma — from a list of ready-made
           scenarios to a script editor with an execution log. Key screens below.
         </p>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant script list"
@@ -120,7 +135,7 @@
           />
           <figcaption>List of available assistant scripts.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant script editor"
@@ -131,7 +146,7 @@
           />
           <figcaption>Script editor with highlighting and AI hints.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant script execution log"
@@ -142,7 +157,7 @@
           />
           <figcaption>Script execution log view.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant running indicator"
@@ -153,7 +168,7 @@
           />
           <figcaption>Active script execution indicator.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant Live Mode"
@@ -164,7 +179,7 @@
           />
           <figcaption>Live Mode — interactive assistant mode.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant More menu"

src/pages/cases/ai-assistant-figma.html

@@ -33,6 +33,21 @@
       .case-article a:not(.btn) {
         color: var(--accent);
       }
+      /* Реальный размер картинки: натуральная ширина в пикселях, ограниченная колонкой */
+      .case-media--real {
+        width: auto;
+        margin-inline: auto;
+        margin-left: auto;
+        transform: none;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .case-media--real img {
+        width: auto;
+        max-width: 100%;
+        margin-inline: auto;
+      }
     </style>
     <script>
       (function () {
@@ -109,7 +124,7 @@
           Плагин добавляет в Figma панель AI-ассистента: от списка готовых сценариев до
           редактора скриптов с логом выполнения. Ниже — ключевые экраны работы.
         </p>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Список скриптов AI-ассистента"
@@ -120,7 +135,7 @@
           />
           <figcaption>Список доступных скриптов ассистента.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Редактор скриптов AI-ассистента"
@@ -131,7 +146,7 @@
           />
           <figcaption>Редактор скрипта с подсветкой и AI-подсказками.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Лог выполнения скрипта AI-ассистента"
@@ -142,7 +157,7 @@
           />
           <figcaption>Представление лога выполнения скрипта.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Индикатор работы скрипта AI-ассистента"
@@ -153,7 +168,7 @@
           />
           <figcaption>Индикатор активного выполнения скрипта.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Live Mode AI-ассистента"
@@ -164,7 +179,7 @@
           />
           <figcaption>Live Mode — интерактивный режим ассистента.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Меню More AI-ассистента"