Feat: Adjust the page header to breadcrumbs #3221 (#8971)

### What problem does this PR solve?

Feat: Adjust the page header to breadcrumbs #3221
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/ui/breadcrumb.tsx

@@ -33,7 +33,10 @@ const BreadcrumbItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <li
     ref={ref}
-    className={cn('inline-flex items-center gap-1.5', className)}
+    className={cn(
+      'inline-flex items-center gap-1.5 text-text-sub-title',
+      className,
+    )}
     {...props}
   />
 ));