update on the step number

src/pages/nearle/dispatch/Dispatch.css

@@ -5966,6 +5966,47 @@
   letter-spacing: 0.04em;
 }
 
+/* Rider/customer/delivery-id stack on the left, Step badge pinned to the
+   right so operators can read the sequence position without opening the
+   Details section. */
+.dispatch-container .dispatch-popup .pu-header-main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.dispatch-container .dispatch-popup .pu-header-left {
+  min-width: 0;
+  flex: 1;
+}
+
+.dispatch-container .dispatch-popup .pu-header-step {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: 10px;
+  background: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.dispatch-container .dispatch-popup .pu-header-step-label {
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #7b1fa2;
+}
+
+.dispatch-container .dispatch-popup .pu-header-step-value {
+  font-size: 15px;
+  font-weight: 800;
+  color: #7b1fa2;
+  white-space: nowrap;
+}
+
 /* --- Body sections ---
    No scroll: the popup expands to fit its content. Width is the dimension
    we constrain (via leaflet's maxWidth prop) so the body grows downward as

src/pages/nearle/dispatch/Dispatch.js

@@ -2644,6 +2644,8 @@ const Dispatch = ({
               </span>
             )}
           </div>
+          <div className="pu-header-main">
+            <div className="pu-header-left">
               <div className="pu-rider">
                 <MdTwoWheeler /> <span>{o.rider_name || o.ridername || 'Unassigned'}</span>
               </div>
@@ -2656,6 +2658,16 @@ const Dispatch = ({
                 <div className="pu-delivery-id">Delivery #{o.deliveryid}</div>
               )}
             </div>
+            {o.step != null && (
+              <div className="pu-header-step">
+                <span className="pu-header-step-label">Step</span>
+                <span className="pu-header-step-value">
+                  {o.trip_number != null && o.trip_number > 1 ? `T${o.trip_number}·` : ''}{o.step}
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
 
         <div className="pu-body">
           {POPUP_TIMELINE.some((t) => o[t.key]) && (
@@ -2726,17 +2738,6 @@ const Dispatch = ({
                   </div>
                 </div>
               )}
-              {o.step != null && (
-                <div className="pu-detail">
-                  <div className="pu-detail-icon"><MdMyLocation /></div>
-                  <div className="pu-detail-body">
-                    <div className="pu-detail-label">Step</div>
-                    <div className="pu-detail-value">
-                      {o.trip_number != null && o.trip_number > 1 ? `Trip ${o.trip_number} · ` : ''}#{o.step}
-                    </div>
-                  </div>
-                </div>
-              )}
             </div>
 
             {(o.actualkms != null || o.riderkms != null || estMeters !== null) && (