Merge pull request #176 from ShipSecAI/@krishna9358/ux-fixes

fixed the position of design and execution tab, changed validation dock to be collapsible.

Author: betterclever

frontend/src/components/layout/AppLayout.tsx

@@ -151,9 +151,9 @@ export function AppLayout({ children }: AppLayoutProps) {
     <SidebarContext.Provider value={sidebarContextValue}>
       <ThemeTransition />
       <div className="flex h-screen bg-background">
-        {/* Sidebar */}
+        {/* Sidebar - z-[100] ensures it's above all other elements including workflow buttons */}
         <Sidebar
-          className={`fixed md:relative z-40 h-full transition-all duration-300 ${sidebarOpen ? 'w-64' : 'w-0 md:w-16'
+          className={`fixed md:relative z-[100] h-full transition-all duration-300 ${sidebarOpen ? 'w-64' : 'w-0 md:w-16'
             }`}
           onMouseEnter={handleMouseEnter}
           onMouseLeave={handleMouseLeave}

frontend/src/components/layout/TopBar.tsx

@@ -165,11 +165,11 @@ export function TopBar({
   }, [metadata.name])
 
   const modeToggle = (
-    <div className="flex rounded-lg border bg-muted/40 overflow-hidden text-xs font-medium shadow-sm">
+    <div className="flex rounded-lg border bg-muted/40 overflow-hidden text-xs font-medium shadow-sm flex-shrink-0">
       <Button
         variant={mode === 'design' ? 'default' : 'ghost'}
         size="sm"
-        className="h-9 px-3 gap-2 rounded-none"
+        className="h-9 w-[110px] px-3 gap-2 rounded-none justify-center"
         onClick={() => {
           if (!canEdit || !workflowId) return
           // Navigate to design URL - this triggers mode update via useLayoutEffect
@@ -178,7 +178,7 @@ export function TopBar({
         disabled={!canEdit}
         aria-pressed={mode === 'design'}
       >
-        <PencilLine className="h-4 w-4" />
+        <PencilLine className="h-4 w-4 flex-shrink-0" />
         <span className="flex flex-col leading-tight text-left">
           <span className="text-xs font-semibold hidden md:inline">Design</span>
           <span
@@ -194,7 +194,7 @@ export function TopBar({
       <Button
         variant={mode === 'execution' ? 'default' : 'ghost'}
         size="sm"
-        className="h-9 px-3 gap-2 rounded-none border-l border-border/50"
+        className="h-9 w-[130px] px-3 gap-2 rounded-none border-l border-border/50 justify-center"
         onClick={() => {
           if (!workflowId) return
           // Navigate to execution URL - this triggers mode update via useLayoutEffect
@@ -206,7 +206,7 @@ export function TopBar({
         }}
         aria-pressed={mode === 'execution'}
       >
-        <MonitorPlay className="h-4 w-4" />
+        <MonitorPlay className="h-4 w-4 flex-shrink-0" />
         <span className="flex flex-col leading-tight text-left">
           <span className="text-xs font-semibold hidden md:inline">Execution</span>
           <span

frontend/src/components/workflow/ValidationDock.tsx

@@ -1,5 +1,5 @@
-import { useMemo } from 'react'
-import { AlertCircle, CheckCircle2 } from 'lucide-react'
+import { useMemo, useState } from 'react'
+import { AlertCircle, CheckCircle2, ChevronDown, ChevronUp } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { useComponentStore } from '@/store/componentStore'
 import { getNodeValidationWarnings } from '@/utils/connectionValidation'
@@ -19,13 +19,16 @@ interface ValidationDockProps {
   onNodeClick: (nodeId: string) => void
 }
 
+const COLLAPSE_THRESHOLD = 3 // Collapse when more than 3 issues
+
 export function ValidationDock({
   nodes,
   edges,
   mode,
   onNodeClick,
 }: ValidationDockProps) {
   const { getComponent } = useComponentStore()
+  const [isExpanded, setIsExpanded] = useState(false)
 
   // Only show validation in design mode
   const isDesignMode = mode === 'design'
@@ -60,6 +63,7 @@ export function ValidationDock({
 
   const totalIssues = validationIssues.length
   const hasIssues = totalIssues > 0
+  const shouldCollapse = totalIssues > COLLAPSE_THRESHOLD
 
   // Don't show dock if not in design mode
   if (!isDesignMode) {
@@ -82,13 +86,38 @@ export function ValidationDock({
     >
       {hasIssues ? (
         <>
-          <div className="flex items-center gap-2 px-2.5 py-1.5 border-b border-border/50">
-            <AlertCircle className="h-3 w-3 text-red-500 shrink-0" />
-            <span className="text-[11px] font-medium">
-              {totalIssues} {totalIssues === 1 ? 'issue' : 'issues'}
-            </span>
-          </div>
-          <div className="divide-y divide-border/50">
+          <button
+            type="button"
+            onClick={() => shouldCollapse && setIsExpanded(!isExpanded)}
+            className={cn(
+              'w-full flex items-center justify-between gap-2 px-2.5 py-1.5 border-b border-border/50',
+              shouldCollapse && 'cursor-pointer hover:bg-muted/50 transition-colors'
+            )}
+          >
+            <div className="flex items-center gap-2">
+              <AlertCircle className="h-3 w-3 text-red-500 shrink-0" />
+              <span className="text-[11px] font-medium">
+                {totalIssues} {totalIssues === 1 ? 'issue' : 'issues'}
+              </span>
+            </div>
+            {shouldCollapse && (
+              <div className="flex items-center gap-1 text-muted-foreground">
+                <span className="text-[10px]">{isExpanded ? 'Collapse' : 'Expand'}</span>
+                {isExpanded ? (
+                  <ChevronDown className="h-3 w-3" />
+                ) : (
+                  <ChevronUp className="h-3 w-3" />
+                )}
+              </div>
+            )}
+          </button>
+          <div
+            className={cn(
+              'divide-y divide-border/50 overflow-hidden transition-all duration-200',
+              shouldCollapse && !isExpanded && 'max-h-0',
+              (!shouldCollapse || isExpanded) && 'max-h-[300px] overflow-y-auto'
+            )}
+          >
             {validationIssues.map((issue, index) => (
               <button
                 key={`${issue.nodeId}-${index}`}

frontend/src/components/workflow/WorkflowBuilderShell.tsx

@@ -115,7 +115,7 @@ export function WorkflowBuilderShell({
             type="button"
             variant="secondary"
             onClick={onToggleLibrary}
-            className="absolute z-[60] top-[10px] left-[10px] h-8 px-3 py-1.5 flex items-center gap-2 rounded-md border bg-background text-xs font-medium transition-all duration-200 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+            className="absolute z-50 top-[10px] left-[10px] h-8 px-3 py-1.5 flex items-center gap-2 rounded-md border bg-background text-xs font-medium transition-all duration-200 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
             aria-expanded={false}
             aria-label="Show component library"
             title="Show components"