Improve utilities preview responsiveness

supersede-css-jlg-enhanced/assets/css/admin.css

@@ -57,6 +57,7 @@
 
 /* Utilities Page */
 .ssc-utilities-wrap .ssc-editor-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; height: calc(100vh - 250px); }
+.ssc-preview-toggle { display: none; }
 .ssc-editor-column, .ssc-preview-column { display: flex; flex-direction: column; }
 .ssc-editor-header, .ssc-preview-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--ssc-border); margin-bottom: 8px; }
 .ssc-editor-container, .ssc-preview-frame-container { flex-grow: 1; position: relative; }
@@ -65,6 +66,53 @@
 .ssc-preview-frame-container iframe { width: 100%; height: 100%; border: 1px solid var(--ssc-border); background: #fff; border-radius: 8px; }
 .ssc-url-bar { display: flex; gap: 8px; flex-grow: 1; } .ssc-url-bar input { width: 100%; }
 
+@media (max-width: 1024px) {
+    .ssc-utilities-wrap .ssc-editor-layout {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto auto;
+        height: auto;
+    }
+
+    .ssc-preview-toggle {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        margin-top: 8px;
+    }
+
+    .ssc-editor-column {
+        order: 1;
+    }
+
+    .ssc-preview-column {
+        order: 2;
+        margin-top: 8px;
+    }
+
+    .ssc-preview-column.is-hidden {
+        display: none;
+    }
+
+    .ssc-preview-frame-container {
+        min-height: 400px;
+    }
+
+    .ssc-editor-container {
+        min-height: 320px;
+    }
+}
+
+@media (max-width: 782px) {
+    .ssc-preview-frame-container {
+        min-height: 320px;
+    }
+
+    .ssc-editor-container {
+        min-height: 280px;
+    }
+}
+
 /* Visual Editors */
 .ssc-kv-builder .kv-row { display: flex; gap: 8px; margin-bottom: 8px; } .ssc-kv-builder .kv-row input { flex: 1; }
 .ssc-shadow-layer { border: 1px solid var(--ssc-border); border-radius: 8px; padding: 12px; margin-bottom: 12px; }

supersede-css-jlg-enhanced/assets/js/utilities.js

@@ -135,6 +135,10 @@
         const pickerToggle = $('#ssc-element-picker-toggle');
         const previewFrame = $('#ssc-preview-frame');
         const urlField = $('#ssc-preview-url');
+        const previewToggleButton = $('#ssc-preview-toggle');
+        const previewColumn = $('#ssc-preview-column');
+        const previewLayoutQuery = typeof window.matchMedia === 'function' ? window.matchMedia('(max-width: 1024px)') : null;
+        let previewVisible = true;
         let lastHovered;
         let lastValidPreviewUrl = previewFrame.attr('src') || '';
 
@@ -240,5 +244,37 @@
              const widths = { desktop: '100%', tablet: '768px', mobile: '375px' };
              $('#ssc-preview-frame').css('max-width', widths[$(this).data('vp')]);
         });
+
+        if (previewToggleButton.length && previewColumn.length && previewLayoutQuery) {
+            const showLabel = previewToggleButton.data('show') || __('Afficher l\'aperçu', 'supersede-css-jlg');
+            const hideLabel = previewToggleButton.data('hide') || __('Masquer l\'aperçu', 'supersede-css-jlg');
+
+            const setPreviewVisibility = (visible) => {
+                previewVisible = visible;
+                previewColumn.toggleClass('is-hidden', !visible);
+                previewToggleButton.text(visible ? hideLabel : showLabel);
+                previewToggleButton.attr('aria-expanded', visible ? 'true' : 'false');
+            };
+
+            const handleLayoutChange = (event) => {
+                if (event.matches) {
+                    setPreviewVisibility(false);
+                } else {
+                    setPreviewVisibility(true);
+                }
+            };
+
+            previewToggleButton.on('click', function() {
+                if (!previewLayoutQuery.matches) return;
+                setPreviewVisibility(!previewVisible);
+            });
+
+            handleLayoutChange(previewLayoutQuery);
+            if (typeof previewLayoutQuery.addEventListener === 'function') {
+                previewLayoutQuery.addEventListener('change', handleLayoutChange);
+            } else if (typeof previewLayoutQuery.addListener === 'function') {
+                previewLayoutQuery.addListener(handleLayoutChange);
+            }
+        }
     });
 })(jQuery);

supersede-css-jlg-enhanced/views/utilities.php

@@ -56,7 +56,10 @@
                 </div>
             </div>
         </div>
-        <div class="ssc-preview-column">
+        <button type="button" id="ssc-preview-toggle" class="button ssc-preview-toggle" data-show="<?php echo esc_attr__('Afficher l\'aperçu', 'supersede-css-jlg'); ?>" data-hide="<?php echo esc_attr__('Masquer l\'aperçu', 'supersede-css-jlg'); ?>" aria-expanded="false" aria-controls="ssc-preview-column">
+            <?php echo esc_html__('Afficher l\'aperçu', 'supersede-css-jlg'); ?>
+        </button>
+        <div class="ssc-preview-column" id="ssc-preview-column">
             <div class="ssc-preview-header">
                 <div class="ssc-url-bar">
                     <input type="url" id="ssc-preview-url" value="<?php echo esc_url($preview_url); ?>">