Fix: Home and team page style adjustment, and some bug fixes #10703 (#10805)

### What problem does this PR solve?

Fix: Home and team page style adjustment, and some bug fixes #10703

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/card-singleline-container/index.less

@@ -0,0 +1,46 @@
+.single :nth-child(n + 2):not(:last-child) {
+  display: none;
+}
+.single :nth-child(-n + 1):not(:last-child) {
+  display: flex;
+}
+@media (min-width: 640px) {
+  .single :nth-child(n + 2):not(:last-child) {
+    display: none;
+  }
+  .single :nth-child(-n + 1):not(:last-child) {
+    display: flex;
+  }
+}
+@media (min-width: 768px) {
+  .single :nth-child(n + 3):not(:last-child) {
+    display: none;
+  }
+  .single :nth-child(-n + 2):not(:last-child) {
+    display: flex;
+  }
+}
+@media (min-width: 1024px) {
+  .single :nth-child(n + 4):not(:last-child) {
+    display: none;
+  }
+  .single :nth-child(-n + 3):not(:last-child) {
+    display: flex;
+  }
+}
+@media (min-width: 1280px) {
+  .single :nth-child(n + 5):not(:last-child) {
+    display: none;
+  }
+  .single :nth-child(-n + 4):not(:last-child) {
+    display: flex;
+  }
+}
+@media (min-width: 1536px) {
+  .single :nth-child(n + 6):not(:last-child) {
+    display: none;
+  }
+  .single :nth-child(-n + 5):not(:last-child) {
+    display: flex;
+  }
+}

web/src/components/card-singleline-container/index.tsx

@@ -0,0 +1,41 @@
+import { cn } from '@/lib/utils';
+import { isValidElement, PropsWithChildren, ReactNode } from 'react';
+import './index.less';
+
+type CardContainerProps = { className?: string } & PropsWithChildren;
+
+export function CardSineLineContainer({
+  children,
+  className,
+}: CardContainerProps) {
+  const flattenChildren = (children: ReactNode): ReactNode[] => {
+    const result: ReactNode[] = [];
+
+    const traverse = (child: ReactNode) => {
+      if (Array.isArray(child)) {
+        child.forEach(traverse);
+      } else if (isValidElement(child) && child.props.children) {
+        result.push(child);
+      } else {
+        result.push(child);
+      }
+    };
+
+    traverse(children);
+    return result;
+  };
+  const childArray = flattenChildren(children);
+  const childCount = childArray.length;
+  console.log(childArray, childCount);
+
+  return (
+    <section
+      className={cn(
+        'grid gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 single',
+        className,
+      )}
+    >
+      {children}
+    </section>
+  );
+}