ui-soxo-bootstrap-core 2.6.42 → 2.6.43

package/core/lib/components/global-header/global-header.scss

@@ -123,7 +123,9 @@
   .right-section {
     margin-top: 0px;
     width: 100%;
-    overflow-x: scroll;
+    /* `auto` so the horizontal scrollbar only appears when content genuinely
+       overflows — `scroll` forced it to show permanently on every page. */
+    overflow-x: auto;
     position: relative;
     padding: 15px;
     margin-left: calc(var(--sidemenu-width, 211px) + 1px);

package/core/modules/steps/steps.js

@@ -11,7 +11,7 @@
  * - Renders a single active step view with compact breadcrumb controls.
  */
 import { ArrowLeftOutlined, ArrowRightOutlined, CompressOutlined, ExpandOutlined, SoundOutlined } from '@ant-design/icons';
-import { Empty, Select, Spin, message } from 'antd';
+import { Empty, Select, Skeleton, message } from 'antd';
 import moment from 'moment';
 import { useEffect, useRef, useState } from 'react';
 import { ExternalWindow } from '../../components';
@@ -1507,7 +1507,9 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
                   {/* <div className="steps-chat-step-component"> */}
                     {loading ? (
                       <div className="steps-chat-loading">
-                        <Spin />
+                        <div className="steps-chat-loading__card">
+                          <Skeleton active title={{ width: '32%' }} paragraph={{ rows: 6, width: ['90%', '82%', '86%', '70%', '78%', '60%'] }} />
+                        </div>
                       </div>
                     ) : null}
                     {!loading ? renderDynamicStep() : null}

package/core/modules/steps/steps.scss

@@ -3,7 +3,13 @@
 .process-steps-page {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  /* The app shell's `.right-section` is `height: 100vh` with a fixed 56px header
+     (`.page-wrapper`) on top of it plus 15px padding. A plain `height: 100%`
+     makes this page a full 100vh — so its bottom runs past the viewport under the
+     header and forces a page scroll in normal view. Bound it to the space that is
+     actually visible below the header instead. (In full screen the promoted
+     `.steps-viewport` is 100vh via the Fullscreen API, so this doesn't apply.) */
+  height: calc(100vh - 86px);
   min-height: 0;
   width: 100%;
   max-width: 100%;
@@ -171,7 +177,7 @@
   /* Clean solid header on the soft sage → ivory gradient (no glass/frost).
      Matches the onboarding reference without the frosted-glass treatment. */
   border-bottom: 1px solid rgba(255, 255, 255, 0.4);
-  background: linear-gradient(180deg, #a7c2c6 0%, #eff3e3 100%);
+  background: linear-gradient(180deg, #a7c2c6 100%, #eff3e3 100%);
 }
 
 .steps-breadcrumb-strip {
@@ -179,8 +185,12 @@
   min-width: 0;
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 52px;
+  /* `safe center` keeps the steps centered when they fit, but falls back to
+     start-aligned when there are too many to fit (>6). Plain `center` would clip
+     BOTH ends on overflow — cutting off the active step's label (e.g. "Guest
+     Details") and making it unreachable even though the strip scrolls. */
+  justify-content: safe center;
+  gap: clamp(28px, 3vw, 52px);
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
@@ -332,13 +342,14 @@
   -webkit-tap-highlight-color: transparent;
 }
 
-/* Thin connecting line drawn into the gap toward the next step. */
+/* Thin connecting line drawn into the gap toward the next step.
+   Width matches the strip's gap so it spans the space without overhanging. */
 .steps-breadcrumb-item:not(:last-child)::after {
   content: '';
   position: absolute;
   left: 100%;
   top: 50%;
-  width: 52px;
+  width: clamp(28px, 3vw, 52px);
   height: 1px;
   background: rgba(37, 58, 91, 0.2);
   transform: translateY(-50%);
@@ -826,10 +837,29 @@
 }
 
 .steps-chat-loading {
+  flex: 1 1 auto;
   min-height: 120px;
   display: flex;
-  align-items: center;
+  align-items: stretch;
   justify-content: center;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+/* Frosted skeleton card that fills the stage while a step loads (replaces the
+   old centered spinner) — matches the soft gradient step surfaces. */
+.steps-chat-loading__card {
+  width: 100%;
+  max-width: 1100px;
+  align-self: stretch;
+  padding: 28px 32px;
+  box-sizing: border-box;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.42);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  box-shadow: 0 2px 10px rgba(20, 50, 64, 0.05);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
 }
 
 /* ── Narration bar (hidden by default via NARRATION_CONTROLS_ENABLED) ── */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.42",
+  "version": "2.6.43",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"