Reverts styling change in MiniHistory which blocked VersionMismatch banner

assets/js/collaborative-editor/components/diagram/CollaborativeWorkflowDiagram.tsx

@@ -5,6 +5,8 @@
 import { ReactFlowProvider } from '@xyflow/react';
 import { useMemo, useState, useCallback, useEffect, useRef } from 'react';
 
+import { cn } from '#/utils/cn';
+
 import {
   useHistoryPanelCollapsed,
   useEditorPreferencesCommands,
@@ -158,7 +160,7 @@ export function CollaborativeWorkflowDiagram({
           <VersionMismatchBanner
             runVersion={versionMismatch.runVersion}
             currentVersion={versionMismatch.currentVersion}
-            className="absolute top-0 left-0 right-0 z-10"
+            className="absolute top-6 left-6 right-4 z-10 max-w-2xl mx-auto"
           />
         )}
 

assets/js/collaborative-editor/components/diagram/MiniHistory.tsx

@@ -171,7 +171,7 @@ export default function MiniHistory({
 
   return (
     <div
-      className={`absolute left-4 top-4 bg-white border
+      className={`absolute left-6 top-6 bg-white border
         border-gray-200 rounded-lg shadow-sm overflow-hidden z-40
         transition-all duration-300 ease-in-out`}
     >

assets/js/collaborative-editor/components/diagram/VersionMismatchBanner.tsx

@@ -24,22 +24,31 @@ export function VersionMismatchBanner({
 }: VersionMismatchBannerProps) {
   return (
     <div
-      className={cn(
-        'w-full bg-yellow-50 text-yellow-700 justify-center flex items-center gap-x-2 px-6 py-2.5 sm:px-3.5',
-        className
-      )}
+      className={cn('rounded-md bg-yellow-50 p-4', className)}
       role="alert"
       aria-live="polite"
     >
-      <span
-        className="hero-exclamation-triangle h-5 w-5 inline-block"
-        aria-hidden="true"
-      />
-      <p className="text-sm leading-6">
-        This run was executed on version {runVersion}, but you're viewing
-        version {currentVersion}. Steps shown may not match the current workflow
-        structure.
-      </p>
+      <div className="flex">
+        <div className="shrink-0">
+          <span
+            className="hero-exclamation-triangle h-5 w-5 text-yellow-400"
+            aria-hidden="true"
+          />
+        </div>
+        <div className="ml-3">
+          <h3 className="text-sm font-medium text-yellow-800">
+            Version mismatch
+          </h3>
+          <div className="mt-2 text-sm text-yellow-700">
+            <p>
+              This run was executed with version {runVersion}, but you're
+              viewing version {currentVersion}. Not all steps executed in the
+              run will appear on the canvas if the workflow structure has
+              changed.
+            </p>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }