From 502e3398097abf2806babe7bfc4f16500e1c0c2e Mon Sep 17 00:00:00 2001
From: bsodfather <bsodfather@gmail.com>
Date: Fri, 10 Jul 2026 01:05:12 +0300
Subject: [PATCH] =?UTF-8?q?=D0=90=D0=B4=D0=B0=D0=BF=D1=82=D0=B8=D1=80?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=B0=D1=82=D1=8C=20wizard=20=D0=BF=D0=BE=D0=B4=20?=
 =?UTF-8?q?=D0=BC=D0=BE=D0=B1=D0=B8=D0=BB=D1=8C=D0=BD=D1=8B=D0=B9=20=D1=8D?=
 =?UTF-8?q?=D0=BA=D1=80=D0=B0=D0=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/ui/css/wizard.css | 118 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 117 insertions(+), 1 deletion(-)

diff --git a/apps/ui/css/wizard.css b/apps/ui/css/wizard.css
index 4addd82..e7fd523 100644
--- a/apps/ui/css/wizard.css
+++ b/apps/ui/css/wizard.css
@@ -467,7 +467,11 @@
   cursor: pointer;
   position: relative;
   z-index: 1;
-  transition: background 0.15s;
+  text-align: left;
+  transition:
+    background 0.15s,
+    border-color 0.15s,
+    box-shadow 0.15s;
   border: 1px solid transparent;
 }
 
@@ -1824,6 +1828,118 @@
   cursor: wait;
 }
 
+@media (max-width: 900px) {
+  .progress-strip {
+    padding: 0 16px;
+    gap: 12px;
+  }
+
+  .wizard-body {
+    display: grid;
+    padding: 24px 16px 120px;
+  }
+
+  .step-sidebar {
+    position: static;
+    width: auto;
+    flex-basis: auto;
+  }
+
+  .step-sidebar-card {
+    border-radius: 10px;
+  }
+
+  .step-sidebar-header {
+    padding: 14px 16px 12px;
+  }
+
+  .steps-list {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    gap: 8px;
+  }
+
+  .steps-list::before {
+    left: calc(10% + 16px);
+    right: calc(10% + 16px);
+    top: 31px;
+    bottom: auto;
+    width: auto;
+    height: 1px;
+  }
+
+  .step-item {
+    display: grid;
+    justify-items: center;
+    align-content: start;
+    gap: 8px;
+    min-height: 96px;
+    padding: 10px 6px 9px;
+    text-align: center;
+  }
+
+  .sidebar-help {
+    display: none;
+  }
+
+  .step-content {
+    width: 100%;
+    padding-top: 0;
+  }
+
+  .step-number {
+    margin-bottom: 3px;
+    font-size: 9.5px;
+  }
+
+  .step-name {
+    display: -webkit-box;
+    min-height: 28px;
+    overflow: hidden;
+    white-space: normal;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    font-size: 11px;
+    line-height: 1.25;
+  }
+
+  .step-status-text {
+    margin-top: 3px;
+    font-size: 10px;
+    line-height: 1.2;
+  }
+
+  .action-bar-inner {
+    padding: 0 16px;
+  }
+}
+
+@media (max-width: 560px) {
+  .progress-label,
+  .progress-pct,
+  .btn-save-draft,
+  .step-counter {
+    display: none;
+  }
+
+  .step-item {
+    min-height: 88px;
+    padding: 9px 4px 8px;
+  }
+
+  .step-number {
+    font-size: 9px;
+  }
+
+  .step-name {
+    font-size: 10px;
+  }
+
+  .step-status-text {
+    font-size: 9.5px;
+  }
+}
+
 /* ══════════════════════════════════════════════
    HTTP method picker (Step 4 REST)
    ══════════════════════════════════════════════ */