fix UI

rajesh-jonnalagadda · Jul 19, 2024 · 332f0e9 · 332f0e9
1 parent 64078fb
commit 332f0e9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git a/keep-ui/app/workflows/mockworkflows.tsx b/keep-ui/app/workflows/mockworkflows.tsx
@@ -15,22 +15,21 @@ export function WorkflowSteps({ workflow }: { workflow: MockWorkflow }) {
     !!workflow?.steps?.length &&
     workflow?.steps?.find((step: MockStep) => step?.provider?.type);
   return (
-    <div className="flex gap-2 items-center mb-4">
+    <div className="flex gap-2 mb-4 mt-6 items-center felx-wrap">
       {workflow?.steps?.map((step: any, index: number) => {
         const provider = step?.provider;
         return (
           <>
             {provider && (
               <div key={`step-${index}`} className="flex items-end gap-2">
                 {index > 0 && (
-                  <TiArrowRight className="text-gray-500 size-8 align-self: center" />
+                  <TiArrowRight className="text-gray-500 size-8" />
                 )}
                 <Image
                   src={`/icons/${provider?.type}-icon.png`}
                   width={30}
                   height={30}
                   alt={provider?.type}
-                  className="mt-6"
                 />
               </div>
             )}
@@ -44,14 +43,13 @@ export function WorkflowSteps({ workflow }: { workflow: MockWorkflow }) {
             {provider && (
               <div key={`action-${index}`} className="flex items-end gap-2">
                 {(index > 0 || isStepPresent) && (
-                  <TiArrowRight className="text-gray-500 size-8 align-self: center" />
+                  <TiArrowRight className="text-gray-500 size-8" />
                 )}
                 <Image
                   src={`/icons/${provider?.type}-icon.png`}
                   width={30}
                   height={30}
                   alt={provider?.type}
-                  className="mt-6"
                 />
               </div>
             )}
@@ -107,7 +105,7 @@ export default function MockWorkflowCardSection({
   }
 
   return (
-    <section className="pt-10 mt-10">
+    <div className="container pt-10 mt-10">
       <div className="p-4 overflow-x-auto">
         <h2 className="text-xl sm:text-2xl font-semibold mb-6 text-center sm:text-left">
           Discover existing workflow templates
@@ -185,6 +183,6 @@ export default function MockWorkflowCardSection({
             );
           })}
       </div>
-    </section>
+    </div>
   );
 }
diff --git a/keep-ui/app/workflows/workfflow-graph.tsx b/keep-ui/app/workflows/workfflow-graph.tsx
@@ -245,11 +245,11 @@ export default function WorkflowGraph({ workflow }: { workflow: Workflow }) {
   }
 
   return (
-    <div className="container">
+    <div className="container h-24">
       <div className="flex items-center">{getIcon()}</div>
       <div>
         {hasNoData && show_real_data ? (
-          <div className="flex justify-center items-center text-gray-400">
+          <div className="flex justify-center h-full items-center text-gray-400">
             No data available
           </div>
         ) : (