presidio ok v.1 button disposition

app/components/ProgressBar.tsx

@@ -1,4 +1,5 @@
 import { Check, Upload, Eye, Shield } from "lucide-react";
+import React from "react";
 
 interface ProgressBarProps {
   currentStep: number;
@@ -27,15 +28,15 @@ export const ProgressBar = ({ currentStep, steps }: ProgressBarProps) => {
   return (
     <div className="w-full max-w-2xl mx-auto mb-4 px-2">
       <div className="flex items-center justify-center">
-        <div className="flex items-center justify-between w-full max-w-xs sm:max-w-md">
+        <div className="flex items-center w-full max-w-md">
           {steps.map((step, index) => {
             const stepNumber = index + 1;
             const isCompleted = stepNumber < currentStep;
             const isCurrent = stepNumber === currentStep;
 
             return (
-              <div key={index} className="flex items-center">
-                {/* Step Circle */}
+              <React.Fragment key={index}>
+                {/* Step Circle and Label */}
                 <div className="flex flex-col items-center">
                   <div
                     className={`w-5 h-5 sm:w-6 sm:h-6 rounded-full flex items-center justify-center font-medium text-xs transition-all duration-300 ${
@@ -55,8 +56,8 @@ export const ProgressBar = ({ currentStep, steps }: ProgressBarProps) => {
                         : "text-gray-500"
                     }`}
                     style={{
-                      wordBreak: 'break-word',
-                      hyphens: 'auto'
+                      wordBreak: "break-word",
+                      hyphens: "auto",
                     }}
                   >
                     {step === "Anonymisation" ? (
@@ -72,9 +73,9 @@ export const ProgressBar = ({ currentStep, steps }: ProgressBarProps) => {
 
                 {/* Connector Line */}
                 {index < steps.length - 1 && (
-                  <div className="flex-1 mx-2 sm:mx-4">
+                  <div className="flex-1 flex items-center justify-center px-2 sm:px-4">
                     <div
-                      className={`h-0.5 w-6 sm:w-12 transition-all duration-300 ${
+                      className={`h-0.5 w-full max-w-[40px] sm:max-w-[60px] transition-all duration-300 ${
                         stepNumber < currentStep
                           ? "bg-[#f7ab6e]"
                           : "bg-gray-200"
@@ -82,7 +83,7 @@ export const ProgressBar = ({ currentStep, steps }: ProgressBarProps) => {
                     />
                   </div>
                 )}
-              </div>
+              </React.Fragment>
             );
           })}
         </div>