update breadcrumbs position

Author: iamfaran

client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx

@@ -148,14 +148,14 @@ const EnvironmentDetail: React.FC = () => {
       className="environment-detail-container"
       style={{ padding: "24px", flex: 1 }}
     >
-      <ModernBreadcrumbs items={breadcrumbItems} />
-
       {/* Environment Header Component */}
       <EnvironmentHeader 
         environment={environment} 
         onEditClick={handleEditClick} 
       />
 
+   
+
       {/* Basic Environment Information Card - improved responsiveness */}
       <Card
         title="Environment Overview"
@@ -202,6 +202,8 @@ const EnvironmentDetail: React.FC = () => {
         </Descriptions>
       </Card>
 
+      {/* Modern Breadcrumbs navigation */}
+      <ModernBreadcrumbs items={breadcrumbItems} />
       {/* Tabs for Workspaces and User Groups */}
       <Tabs 
         defaultActiveKey="workspaces"

client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx

@@ -105,9 +105,6 @@ const WorkspaceDetail: React.FC = () => {
       minWidth: "1000px",
       overflowX: "auto"
     }}>
-      {/* Modern Breadcrumbs navigation */}
-      <ModernBreadcrumbs items={breadcrumbItems} />
-
       {/* New Workspace Header */}
       <WorkspaceHeader
         workspace={workspace}
@@ -117,6 +114,9 @@ const WorkspaceDetail: React.FC = () => {
         onDeploy={() => openDeployModal(workspace, workspaceConfig, environment)}
       />
 
+      {/* Modern Breadcrumbs navigation */}
+      <ModernBreadcrumbs items={breadcrumbItems} />
+
       {/* Tabs for Apps, Data Sources, and Queries */}
       <Tabs defaultActiveKey="apps" className="modern-tabs" type="card">
         <TabPane tab={<span><AppstoreOutlined /> Apps</span>} key="apps">

client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx

@@ -19,24 +19,30 @@ interface ModernBreadcrumbsProps extends BreadcrumbProps {
 const ModernBreadcrumbs: React.FC<ModernBreadcrumbsProps> = ({ items = [], ...props }) => {
   return (
     <div className="modern-breadcrumb" style={{
-      background: '#f0f2f5',
-      padding: '12px 24px',
+      background: '#e6f7ff',
+      padding: '10px 20px',
       borderRadius: '8px',
       marginBottom: '20px',
-      boxShadow: '0 1px 3px rgba(0,0,0,0.05)'
+      boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+      display: 'flex',
+      alignItems: 'center'
     }}>
-      <Breadcrumb {...props}>
+      <Breadcrumb {...props} separator="/">
         {items.map(item => (
           <Breadcrumb.Item key={item.key}>
             {item.onClick ? (
               <span
-                style={{ cursor: "pointer" }}
+                style={{ cursor: "pointer", color: '#1890ff', fontWeight: '500' }}
                 onClick={item.onClick}
+                onMouseEnter={(e) => e.currentTarget.style.textDecoration = 'underline'}
+                onMouseLeave={(e) => e.currentTarget.style.textDecoration = 'none'}
               >
                 {item.title}
               </span>
             ) : (
-              item.title
+              <span style={{ color: '#595959', fontWeight: '500' }}>
+                {item.title}
+              </span>
             )}
           </Breadcrumb.Item>
         ))}